LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
/* #Prototype Styles
================================================== */		
html, body{ background-color:gray; }	

body
{ 
	
	background-repeat: no-repeat;
	background-position: top center;
	width:100%;
	background-size:cover;
	height:100%;
	min-height:1000px;
	overflow:hidden;
	font-family: 'quicksandlight', Helvetica, Arial;
	color:#FFFFFF;
	text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
    
}

/* hardware accelatator class */	
	.trans3d
	{
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform-style: preserve-3d;
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform-style:preserve-3d;
		-ms-transform: translate3d(0, 0, 0);
		transform-style:preserve-3d;
		transform: translate3d(0, 0, 0);
	}
	
	#contentContainer
	{
		position:absolute;
		width:100%;
    height:100%;
    background-color:#9cc;
	}
	
	#panelContainer
	{
		position:absolute;      
	}
	
	.panelItem
	{
		position:absolute;
	}
	
	.panelItemInner
	{
		
		position:absolute;
		font-size:72px;
		left:50%;
		
		text-align:center;
		
		
	}
JS
// set and cache variables
var w, container, panels, item, radius, itemLength, rY, color; 

var count = 49;
var rows = 7;
var columns = 7;
var speed = 1;

$(document).ready( init )
		
function init()
{
  	w = $(window);
  	container = $( '#contentContainer' );
  	panels = $( '#panelContainer' );

  	// set container 3d props
  	TweenMax.set(container, {perspective:600})

  	// create panel item props
  	createLooper()
}
        
function generatePanels()
{
  	var $x = 0;
  	var $y = 0;

  	var $w = Math.round( w.width() / columns );
  	var $h = Math.round( w.height() / rows )

    for ( var i = 0; i < count; i++ )
    {
      panels.append('
'); var $panel = $('#item' + i); TweenMax.set( $panel, { left:$x * $w, top:$y * $h } ) $x++; if ( $x === columns ) { $x = 0; $y++; } } item = $( '.panelItem' ); itemInner = item.find('.panelItemInner'); itemLength = $( '.panelItem' ).length; color = 'rgb(' + getRandomInt(255) + ',' + getRandomInt(255)+','+ getRandomInt(255)+')' TweenMax.set( itemInner, { backgroundColor:color } ); TweenMax.set( item, {width: $w, height:$h } ); TweenMax.set( itemInner, {width: $w, height:$h, marginLeft:-$w * .5, marginRight:-$h * .5 } ); } function animateIn( $item, $block ) { var $nrX = 720 - getRandomInt(720); var $nrY = 720 - getRandomInt(720); var $nx = -(500) + getRandomInt( 1000 ) var $ny = -(500) + getRandomInt( 1000 ) var $nz = -4000 + getRandomInt( 8000 ) var $s = 3.5 var $d = (getRandomInt( 10 ) * .1) TweenMax.set( $item, { autoAlpha:1, delay:$d } ) TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} ) TweenMax.to( $block, 1, { delay:0, rotationY:0, rotationX:0, ease:Quint.easeInOut} ) TweenMax.to( $block, 1, { delay:0, x:0, y:0, z:0, ease:Expo.easeInOut} ) TweenMax.to( $block, 1, { delay:0, autoAlpha:1, ease:Expo.easeInOut } ) } function startAnimateOut() { TweenMax.set( container, { backgroundColor:color } ); panels.html(''); num = new Date(); } function createLooper() { generatePanels() for ( var i = 0; i < itemLength; i++ ) { var $item = item.eq(i); var $block = $item.find('.panelItemInner'); animateIn( $item, $block ); } TweenMax.delayedCall( speed, startAnimateOut ); TweenMax.delayedCall( speed, createLooper ) } function getRandomInt( $n ) { return Math.floor((Math.random()*$n)+1); }

Description

Using 3D Transforms at 1 second intervals, removing them at 1 second and changing the background-color of the container div. It's a trick!
Term
Tue, 11/28/2017 - 13:40

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv