#css3 transforms

Impress.js – Presentation Framework with Power of CSS3 Transitions

CSS3 Transitions rocks once again here in creating stunning presentations online. Say thanks to Impress.js a superb jQuery plugin that builds impressive presentations using the CSS3 transforms & transitions.

The presentations created using Impress.js are really mesmerizing as the transition effects make each and every slide come alive and give a different look. According to my point of view, If I…

Simple Pricing Tables 2 (Pricing Tables)

Purchase $5.00 Simple Pricing Tables 2 is clean, professional, modern and fully responsive template for your site build with Bootstrap 3.3.5. If you are going to offer different products or services on your site, you can easily add Simple Pricing Tables 2 to your content and make it super easy for your visitors to make the best choice on what they need. You can quickly add features to your…

New Post has been published on http://www.htmluse.com/snabbt-js-minimalistic-animation-library-in-javascript/

Snabbt.js – Minimalistic Animation Library in Javascript

Download Demo

New Post has been published on http://www.htmluse.com/dynamic-scrolling-shadow/

Dynamic Scrolling Shadow

Download   Demo

Scrolling Shadow Effect

I stumbled across the VoicesHavePower website which uses a nice grid layout to separate its contents. It showcases stories each with a content panel that gives off a nice looking flat shadow. As you scroll through the website, each individual panel dynamically shifts the shadow based on where it is in your window. I’ve recreated this effect with CSS3 transform effects and some jQuery.

HTML Structure

This is the basic structure for the content panel. The Grid-Container is what contains the colored background, panel and shadow. The Shadow-Box is actually what has the scrolling shadow effect.

  1

2

3

4

5

6

7

8

9

10

<div class="grid-container blue">

  <div class="shadow-box">

    <div class="content">

    </div>

    <div class="shadows">

      <div class="shadow top"></div>

      <div class="shadow bottom"></div>

    </div>

  </div>

</div>

Scrolling Shadow Styles

Here is the css for the shadow box. The scrolling shadow effect is created with 2 shadow elements, one positioned to the top right corner of the content box, and the other positioned at the bottom left corner. Together they are animated and they are bounded by the grid-container class.

  1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

.shadow-box

display: block;

position: relative;

z-index: 1;

width: 300px;

height: 400px;

.shadow-box .content

  position: relative;

  z-index: 1;

  width: inherit;

  height: inherit;

  background-color: #fff;

.shadow-box .shadows

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

  filter: alpha(opacity=30);

  -moz-opacity: 0.3;

  -khtml-opacity: 0.3;

  opacity: 0.3;

  .shadow-box .shadow

    position: absolute;

    z-index: -1;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 200%;

    background-color: #444;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

     .shadow-box .shadow.top

    right: 0;

    top: 0;

    -webkit-transform-origin: 100% 0;

    transform-origin: 100% 0;

     .shadow-box .shadow.bottom

    -webkit-transform-origin: 0 0;

    transform-origin: 0 0;

    right: 0;

    top: 100%;

   jQuery

This is where the scrolling shadow angle is calculated. Basically, for each shadow-box it will calculate a percentage for how far scrolled it is within the current view of the window. You can change how angled the shadow starts out as and where it will end once you’ve completely scrolled past it, by altering the startingRotate and endingRotate variables.

  1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

// scrolling shadow effect

function updateParallax()

  $(".grid-container").each(function ()

    var height = $(this).height();

    var bottom = $(this).offset().top + height;

    var top = $(this).offset().top;

    var windowHeight = $(window).height();

    var scrollTop = $(window).scrollTop() + windowHeight;

    var fromTop = $(window).scrollTop() - top;

    if ((bottom > $(window).scrollTop()) && (top < scrollTop))             

      var percent = ((scrollTop - top) / (height + windowHeight));

      var startingRotate = -80; // Starting angle of shadow

      var endingRotate = -15; // Ending angle of shadow

      var shadowRotate =  (startingRotate - endingRotate) * (1 - percent) + endingRotate;

      if (shadowRotate < startingRotate)

        shadowRotate = startingRotate

             else if (shadowRotate > 0)

        shadowRotate = 0;

             $(this).find('.shadow-box .shadow').css('-webkit-transform': 'rotate(' + shadowRotate + 'deg)' );

      $(this).find('.shadow-box .shadow').css('-moz-transform': 'rotate(' + shadowRotate + 'deg)' );

      $(this).find('.shadow-box .shadow').css('-ms-transform': 'rotate(' + shadowRotate + 'deg)' );

      $(this).find('.shadow-box .shadow').css('-o-transform': 'rotate(' + shadowRotate + 'deg)' );

      $(this).find('.shadow-box .shadow').css('transform': 'rotate(' + shadowRotate + 'deg)' );

       );

updateParallax();

$(window).scroll(function()

  updateParallax();