P Paper
  • Menu
  • Imersive video
  • Reveal1
  • Reveal2
  • Animated Intro
  • AOS-PDP-New
  • Sticky Footer
  • 3D grid
  • Vertical Fixed Nav
  • Vertical Fixed Nav2
  • Split Screen Reveal
  • On Load block revealer
  • On Scroll1
  • Modal Block reveal
  • Orgami Foldout Gallery
  • On Load blockX
  • Hover Slide
  • Grid Loading3
  • AOS Multistep
  • Onscroll-Orig
  • Border SVG Line
  • Samsung
  • HTML5 Video
  • Split Screen NEW1
  • Hover Tilt8N
  • Hover Tilt8-single
  • Horiz TimeLine
  • vert timeline
  • Vert Scroll timeline
  • Vline-Manoela
  • Split Screen rev 2 img
  • 10 Image Hover Effects
  • Rotate Icon
  • CSS Masked Transition
  • Hover Tilt Effect-N
  • Image Mask
  • SVG MOdal window
  • Border Animation SVG
  • BorderSVG1
  • Card Expansion
  • Multi Overlay
  • Hover Stack Motion
  • FAQ
  • responsive accordion
  • Smart Fixed Navigation
  • Vertical Fixed Nav1
  • Multiple Content Overlays
  • Card Expansion Pbrisk Apsara
  • Scroll Down Mouse SVG
  • Ex Bar Menu1
  • Ex Bar Menu2
  • Expanding Bar Menu3
  • Zoom
  • Hover Effect set1
  • Hover Stack 1row
  • Blend Double Exp
  • Cross Ref Table
  • Grid Load Animation
  • Split Page Layout
  • Team member bio
  • Responsive vertical tab
  • Product Comparision
  • Product Compare Manoela
  • Designer Developer Page
  • Header Play
  • Explodal
  • Explodal-New
  • Arti Intro Fixed Side
  • Arti intro side
  • Arti intro grid
  • Morphing Back
  • Morphing Back2a
  • Folder Preview Ideas
  • Folder Pre-3
  • Responsive Tabs-RTAB
  • Responsive Full Width Tab
  • Letter Interaction
  • Image Grid Demo1
  • lLittleSnippet1579
  • Split Screen rev 2a
  • Pointy Slider
  • Organic Morphing
  • Organic Morphing2
  • Buttons Baamboo
  • CSS Grid Slide Show
  • CSS Grid Slide Demo1
  • Sticky Top
  • Animated Pieces
  • Schedule Template
  • Animated Pieces Grid
  • Animated Pieces Gallery
  • M word Overlays
  • Hover Menu Items
  • Morphpage-d2
  • morphpage d-3
  • Back to top
  • Hover-menu-salal
  • Hover Menu-Yona
  • Hove Menu-Dustu
  • hover Menu Tsula
  • Menu hover Mohe
  • Morphing Back2aNew
  • Auto Hide Nav 3
  • indexap
    • servicesap
  • DragImageGrid
  • Split Layout
  • Deco Lines EX3
  • Organic SVG Morph
  • Team member bio1
  • Strechy Navigation
  • MENU Block revealer
  • Smart Fix Nav V1
  • lice Dual Demo1
  • Slice Demo1-Play
  • SVG Hero2
  • Slice Demo2-Play
  • Liquid D3
  • Grid Load Animation -shu
  • Quad Image
  • SVG Shape Overlay
  • Split Screen
  • xpandable Project Pres
  • Sliding Panel
  • Menu
  • Imersive video
  • Reveal1
  • Reveal2
  • Animated Intro
  • AOS-PDP-New
  • Sticky Footer
  • 3D grid
  • Vertical Fixed Nav
  • Vertical Fixed Nav2
  • Split Screen Reveal
  • On Load block revealer
  • On Scroll1
  • Modal Block reveal
  • Orgami Foldout Gallery
  • On Load blockX
  • Hover Slide
  • Grid Loading3
  • AOS Multistep
  • Onscroll-Orig
  • Border SVG Line
  • Samsung
  • HTML5 Video
  • Split Screen NEW1
  • Hover Tilt8N
  • Hover Tilt8-single
  • Horiz TimeLine
  • vert timeline
  • Vert Scroll timeline
  • Vline-Manoela
  • Split Screen rev 2 img
  • 10 Image Hover Effects
  • Rotate Icon
  • CSS Masked Transition
  • Hover Tilt Effect-N
  • Image Mask
  • SVG MOdal window
  • Border Animation SVG
  • BorderSVG1
  • Card Expansion
  • Multi Overlay
  • Hover Stack Motion
  • FAQ
  • responsive accordion
  • Smart Fixed Navigation
  • Vertical Fixed Nav1
  • Multiple Content Overlays
  • Card Expansion Pbrisk Apsara
  • Scroll Down Mouse SVG
  • Ex Bar Menu1
  • Ex Bar Menu2
  • Expanding Bar Menu3
  • Zoom
  • Hover Effect set1
  • Hover Stack 1row
  • Blend Double Exp
  • Cross Ref Table
  • Grid Load Animation
  • Split Page Layout
  • Team member bio
  • Responsive vertical tab
  • Product Comparision
  • Product Compare Manoela
  • Designer Developer Page
  • Header Play
  • Explodal
  • Explodal-New
  • Arti Intro Fixed Side
  • Arti intro side
  • Arti intro grid
  • Morphing Back
  • Morphing Back2a
  • Folder Preview Ideas
  • Folder Pre-3
  • Responsive Tabs-RTAB
  • Responsive Full Width Tab
  • Letter Interaction
  • Image Grid Demo1
  • lLittleSnippet1579
  • Split Screen rev 2a
  • Pointy Slider
  • Organic Morphing
  • Organic Morphing2
  • Buttons Baamboo
  • CSS Grid Slide Show
  • CSS Grid Slide Demo1
  • Sticky Top
  • Animated Pieces
  • Schedule Template
  • Animated Pieces Grid
  • Animated Pieces Gallery
  • M word Overlays
  • Hover Menu Items
  • Morphpage-d2
  • morphpage d-3
  • Back to top
  • Hover-menu-salal
  • Hover Menu-Yona
  • Hove Menu-Dustu
  • hover Menu Tsula
  • Menu hover Mohe
  • Morphing Back2aNew
  • Auto Hide Nav 3
  • indexap
    • servicesap
  • DragImageGrid
  • Split Layout
  • Deco Lines EX3
  • Organic SVG Morph
  • Team member bio1
  • Strechy Navigation
  • MENU Block revealer
  • Smart Fix Nav V1
  • lice Dual Demo1
  • Slice Demo1-Play
  • SVG Hero2
  • Slice Demo2-Play
  • Liquid D3
  • Grid Load Animation -shu
  • Quad Image
  • SVG Shape Overlay
  • Split Screen
  • xpandable Project Pres
  • Sliding Panel
Search by typing & pressing enter

YOUR CART

Hover Slide Effect

Hover with your mouse to see single areas slide or click to make all areas slide

Images by Tucia

Assets

Folder: Hover Slide Effect
Page Type: No header with header and footer codes

Files:

Footer:

<!-- folder hover slide effect -->
<!-- footer java code for hover slide effect starts here -->
       <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://simpleton99p.weebly.com/files/theme/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                //custom animations to use
                //in the transitions
                var animations        = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
                var total_anim        = animations.length;
                //just change this to one of your choice
                var easeType        = 'swing';
                //the speed of each transition
                var animSpeed        = 450;
                //caching
                var $hs_container    = $('#hs_container');
                var $hs_areas        = $hs_container.find('.hs_area');
                
                //first preload all images
                $hs_images          = $hs_container.find('img');
                var total_images    = $hs_images.length;
                var cnt             = 0;
                $hs_images.each(function(){
                    var $this = $(this);
                    $('<img/>').load(function(){
                        ++cnt;
                        if(cnt == total_images){
                            $hs_areas.each(function(){
                                var $area         = $(this);
                                //when the mouse enters the area we animate the current
                                //image (random animation from array animations),
                                //so that the next one gets visible.
                                //"over" is a flag indicating if we can animate
                                //an area or not (we don't want 2 animations
                                //at the same time for each area)
                                $area.data('over',true).bind('mouseenter',function(){
                                    if($area.data('over')){
                                        $area.data('over',false);
                                        //how many images in this area?
                                        var total        = $area.children().length;
                                        //visible image
                                        var $current     = $area.find('img:visible');
                                        //index of visible image
                                        var idx_current = $current.index();
                                        //the next image that's going to be displayed.
                                        //either the next one, or the first one if the current is the last
                                        var $next        = (idx_current == total-1) ? $area.children(':first') : $current.next();
                                        //show next one (not yet visible)
                                        $next.show();
                                        //get a random animation
                                        var anim        = animations[Math.floor(Math.random()*total_anim)];
                                        switch(anim){
                                            //current slides out from the right
                                            case 'right':
                                                $current.animate({
                                                    'left':$current.width()+'px'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'left'        : '0px'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the left
                                            case 'left':
                                                $current.animate({
                                                    'left':-$current.width()+'px'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'left'        : '0px'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the top    
                                            case 'top':
                                                $current.animate({
                                                    'top':-$current.height()+'px'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'top'        : '0px'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the bottom    
                                            case 'bottom':
                                                $current.animate({
                                                    'top':$current.height()+'px'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'top'        : '0px'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the right    and fades out
                                            case 'rightFade':
                                                $current.animate({
                                                    'left':$current.width()+'px',
                                                    'opacity':'0'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'left'        : '0px',
                                                        'opacity'    : '1'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the left and fades out    
                                            case 'leftFade':
                                                $current.animate({
                                                    'left':-$current.width()+'px','opacity':'0'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'left'        : '0px',
                                                        'opacity'    : '1'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the top and fades out    
                                            case 'topFade':
                                                $current.animate({
                                                    'top':-$current.height()+'px',
                                                    'opacity':'0'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'top'        : '0px',
                                                        'opacity'    : '1'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                            //current slides out from the bottom and fades out    
                                            case 'bottomFade':
                                                $current.animate({
                                                    'top':$current.height()+'px',
                                                    'opacity':'0'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'top'        : '0px',
                                                        'opacity'    : '1'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;        
                                            default:
                                                $current.animate({
                                                    'left':-$current.width()+'px'
                                                },
                                                animSpeed,
                                                easeType,
                                                function(){
                                                    $current.hide().css({
                                                        'z-index'    : '1',
                                                        'left'        : '0px'
                                                    });
                                                    $next.css('z-index','9999');
                                                    $area.data('over',true);
                                                });
                                                break;
                                        }    
                                    }
                                });
                            });
                            
                            //when clicking the hs_container all areas get slided
                            //(just for fun...you would probably want to enter the site
                            //or something similar)
                            $hs_container.bind('click',function(){
                                $hs_areas.trigger('mouseenter');
                            });
                        }
                    }).attr('src',$this.attr('src'));
                });            
                

            });
        </script>
<!-- fotter code for hover slide effect ends here -->

Header:

<!--
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>
-->
<!-- folder Hover Slide Effects -->
<!-- header code for hover slide effects -->
        <link rel="stylesheet" href="http://simpleton99p.weebly.com/files/theme/style-hovslide.css" type="text/css" media="screen"/>
        <script src="http://simpleton99p.weebly.com/files/theme/cufon-yui.js" type="text/javascript"></script>
        <script src="http://simpleton99p.weebly.com/files/theme/Cantarell.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('a,h3');
            Cufon.replace('h1', {
                textShadow: '0px 1px #fff'
            });
            Cufon.replace('h2', {
                textShadow: '0px 1px #fff'
            });
        </script>
<!-- end header code for hover slide effect -->

Powered by Create your own unique website with customizable templates.