D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
sethkontny
Full window
Github gist
A Pen by seth kontny.
<div class="column-container clearfix"> <!-- col 1 --> <div class="column"> <div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-2x block-mango" data-scrollreveal="enter right after 0.5s"></div> <div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-3x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> <div class="block block-1x block-grape" data-scrollreveal="enter top"></div> </div> <!-- col 2 --> <div class="column"> <div class="block block-3x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-1x block-orange" data-scrollreveal="enter left"></div> <div class="block block-2x block-grape" data-scrollreveal="enter top"></div> <div class="block block-1x block-orange" data-scrollreveal="enter left"></div> <div class="block block-1x block-grape" data-scrollreveal="enter top"></div> <div class="block block-2x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> </div> <!-- col 3 --> <div class="column"> <div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> <div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-2x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> <div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-3x block-orange" data-scrollreveal="enter left"></div> </div> <!-- col 4 --> <div class="column"> <div class="block block-1x block-orange" data-scrollreveal="enter left"></div> <div class="block block-2x block-grape" data-scrollreveal="enter top"></div> <div class="block block-3x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> <div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-2x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> </div> <!-- col 5 --> <div class="column"> <div class="block block-3x block-mango" data-scrollreveal="enter right after 0.5s"></div> <div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-2x block-orange" data-scrollreveal="enter left"></div> <div class="block block-1x block-grape" data-scrollreveal="enter top"></div> <div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-2x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> </div> <!-- col 6 --> <div class="column"> <div class="block block-1x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-3x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-3x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> <div class="block block-1x block-orange" data-scrollreveal="enter left"></div> <div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> </div> <!-- col 7 --> <div class="column"> <div class="block block-2x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-1x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> <div class="block block-1x block-mango" data-scrollreveal="enter right after 0.5s"></div> <div class="block block-3x block-raspberry" data-scrollreveal="enter bottom over 1s and move 100px"></div> <div class="block block-2x block-mango" data-scrollreveal="enter right after 0.5s"></div> <div class="block block-1x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> </div> <!-- col 8 --> <div class="column"> <div class="block block-1x block-grape" data-scrollreveal="enter top"></div> <div class="block block-2x block-orange" data-scrollreveal="enter left"></div> <div class="block block-1x block-grape" data-scrollreveal="enter top"></div> <div class="block block-3x block-slate" data-scrollreveal="enter top over 3s after 0.5s"></div> <div class="block block-1x block-blueberry" data-scrollreveal="enter top over 0.5s and move 200px"></div> <div class="block block-2x block-kiwi" data-scrollreveal="enter bottom over 1s and move 300px after 0.3s"></div> </div> </div>