Creating A Full Page Wipe Effect with jQuery and CSS3

File Size: 2.4 KB
Views Total: 4946
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Creating A Full Page Wipe Effect with jQuery and CSS3

An imperfect emulation of the beautiful website Airnauts to create a cool full page 'wipe' effect using jQuery, CSS3 and SVG. It also allows to fade Html elements in or out of visibility as you scroll down the page.

How to use it:

1. Draw a graphic using SVG that will be rotated for the 'wipe' effect.

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 -3.351 100 100" enable-background="new 0 -3.351 100 100" xml:space="preserve">
  <g>
    <path fill="red" d="M50,46.65h50c0-27.614-22.384-50-49.999-50.001S0,19.034,0,46.648c0,17.863,9.53,34.37,25,43.302 L50,46.65z"/>
  </g>
</svg>

2. Wrap the SVG graphic into a SVG wrapper.

<div id="svgwrapper">
  <!-- Place the SVG graphic here -->
  <p id="p1">Text 1</p>
  <p id="p1">Text 2</p>
  <p id="p1">Text 3</p>
</div>

3. The required CSS styles for the SVG wrapper.

#svgwrapper {
  position: fixed;
  overflow: hidden;
  width: 100%;
  background: #565a68;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #565a68), color-stop(100%, #06050a));
  background: -webkit-radial-gradient(center, ellipse cover, #565a68 0%, #06050a 100%);
  background: -webkit-radial-gradient(center, ellipse, #565a68 0%, #06050a 100%);
  background: radial-gradient(ellipse at center, #565a68 0%, #06050a 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565a68', endColorstr='#06050a', GradientType=1 );
}

#svg { opacity: 0; }

4. Include the necessary jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

5. The Javascript to enable the 'wipe' effect on scroll.

$(function(){
var ww = 0, //window width
wh = 0, //window height
bh = 0, //body height
w = 0, //width
h = 0, //body height - window height
rad = 0, //radian
deg = $(window).scrollTop()*(360/h)

$(window).on('load resize', function(e){
ww = $(window).width();
wh = $(window).height();
if(wh > ww){w = wh;}else{w = ww;} 
bh = $("body").height();
h = bh - wh;
$('#svg').css({
'width':w*2 + 'px', 
'height':w*2 + 'px', 
'transform':'translate(' + -w/ 2 + 'px,' + -w + 'px) scale(1.2) ',
'opacity':0.3
});
$('#svgwrapper').css({
'height':w + 'px'
});
});

deg = $(window).scrollTop()*(360/h);
if(deg > 360){deg = 360;}
$('#svg').css({
"transform":'translate(' + -w/2 + 'px,' + -w + 'px) scale(1.2) ' + 'rotate('+ -deg+'deg)'
});
});
});

This awesome jQuery plugin is developed by 440design. For more Advanced Usages, please check the demo page or visit the official website.