In this video, I'm going to show you how to add Interactive 3D Carousel With jQuery And GSAP with full source code by jishaansinghal
Code start{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Interactive 3D Carousel With jQuery And GSAP by jishaansinghal</title>
</head>
<style type="text/css">
html, body{ background-image: linear-gradient(to left top, #00f6ff, #00d3ff, #00aaff, #7577f0, #af2dab); }
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);
filter: dropshadow(color=#000000, offx=1, offy=1);
}
header
{
margin-top:30px;
position:absolute;
z-index:5;
width:420px;
padding-top:10px;
padding-bottom:10px;
}
h1{
font-size:36px;
letter-spacing:-2.5px;
margin-left:30px;
}
h3{
font-size:16px;
letter-spacing:-1.5px;
margin-top:5px;
margin-left:35px;
}
#fps
{
margin-top:5px;
margin-left:35px;
}
a
{
color:rgba( 255, 255, 255, .65 );
text-decoration: none;
}
a:hover
{
color:rgba( 255, 255, 255, 1 );
}
.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;
margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;
}
#carouselContainer
{
position:absolute;
margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;
}
.carouselItem
{
width:320px;
height:130px;
position:absolute;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-90px;
visibility:hidden;
}
.carouselItemInner
{
width:320px;
height:130px;
position:absolute;
background-color:rgba(255, 255, 255, .75);
border:10px solid rgba(255, 255, 255, .5);
color: #222;
font-size:72px;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-90px;
text-align:center;
padding-top:50px;
}
img{
height: 100%;
width: 100%;
}
</style>
<body>
<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
<figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure>
<figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure>
<figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure>
<figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure>
<figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure>
<figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure>
<figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure>
<figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure>
<figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure>
<figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure>
</section>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
// set and cache variables
var w, container, carousel, item, radius, itemLength, rY, ticker, fps;
var mouseX = 0;
var mouseY = 0;
var mouseZ = 0;
var addX = 0;
// fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
// no need to create my own :)
var fps_counter = {
tick: function ()
{
// this has to clone the array every tick so that
// separate instances won't share state
this.times = this.times.concat(+new Date());
var seconds, times = this.times;
if (times.length > this.span + 1)
{
times.shift(); // ditch the oldest time
seconds = (times[times.length - 1] - times[0]) / 1000;
return Math.round(this.span / seconds);
}
else return null;
},
times: [],
span: 20
};
var counter = Object.create(fps_counter);
$(document).ready( init )
function init()
{
w = $(window);
container = $( '#contentContainer' );
carousel = $( '#carouselContainer' );
item = $( '.carouselItem' );
itemLength = $( '.carouselItem' ).length;
fps = $('#fps');
rY = 360 / itemLength;
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
// set container 3d props
TweenMax.set(container, {perspective:600})
TweenMax.set(carousel, {z:-(radius)})
// create carousel item props
for ( var i = 0; i < itemLength; i++ )
{
var $item = item.eq(i);
var $block = $item.find('.carouselItemInner');
//thanks @chrisgannon!
TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
animateIn( $item, $block )
}
// set mouse x and y props and looper ticker
window.addEventListener( "mousemove", onMouseMove, false );
ticker = setInterval( looper, 1000/60 );
}
function animateIn( $item, $block )
{
var $nrX = 360 * getRandomInt(2);
var $nrY = 360 * getRandomInt(2);
var $nx = -(2000) + getRandomInt( 4000 )
var $ny = -(2000) + getRandomInt( 4000 )
var $nz = -4000 + getRandomInt( 4000 )
var $s = 1.5 + (getRandomInt( 10 ) * .1)
var $d = 1 - (getRandomInt( 8 ) * .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, $s, { delay:$d, rotationY:0, rotationX:0, z:0, ease:Expo.easeInOut} )
TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )
}
function onMouseMove(event)
{
mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;
mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);
}
// loops and sets the carousel 3d properties
function looper()
{
addX += mouseX
TweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )
TweenMax.set( carousel, {z:mouseZ } )
fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' )
}
function getRandomInt( $n )
{
return Math.floor((Math.random()*$n)+1);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>
Connect/Contact with me here
Fiverr : https://www.fiverr.com/jishaansinghal
Youtube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ
Facebook : https://www.facebook.com/jishaan.singhal
FB Group :https://www.facebook.com/groups/457165385377074
FB Group :https://www.facebook.com/groups/freegigpromotewithjishaansinghal
FB Page :https://www.facebook.com/promoteyourgig
Twitter : twitter.com/jishaan_singhal
Instagram : https://www.instagram.com/jishaansinghal
Linkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203
Blogger : https://jishaansinghal.blogspot.com
keywords:
how to use owl carousel, owl carousel example, owl carousel slider, owl carousel 2 tutorial, carousel, owl carousel tutorial, owl carousel 2, jquery plugin tutorial, image slider, slider, how to use owl carousel in your website, how to make a testimonial carousel with owl carousel, owl carousel slider responsive, jquery tutorial, owl carousel slider tutorial, wordpress, owl carousel slider example code, owl carousel slider example, bootstrap, html css slider, jquery slider tutorial, jquery slider, wordpress carousel, how to install owl carousel 2, web dev, owl carousel slider in html, image slider using html and css, owl slider, owl, videos, javascript slider, how to use owl carousel in bootstrap, image carousel, jquery carousel, jquery plugin, jquery slider plugin, wordpress plugins, jquery, html, css3, how to use owl carousel in html, urdu tutorials, hindi tutorials, xitclub, xitclub tutorials, wpacademy, wordpress tutorial in urdu, wordpress tutorial in hindi, wordpress theme development in urdu, wordpress theme development tutorial in urdu, wp theme development 2018, wp theme development tutorial in urdu, wordpress theme development from scratch, custom carousel wordpress, owl carousel custom navigation, owl carousel wordpress tutorial, how to use owl carousel with html and css | 2021, css slideshow, image slider animation, image slider autoplay, gallery slider, how to use owl carousel 2 slider, html carousel, उल्लू 180 से अधिक डिग्री सिर घुमाता है, ulloo 180 se adhik digree sir ghumaata hai, serene owl turns head, spiritual owl, robot owl, owls, funny, cute, pet, pets, animal, animals, funny owls, funny owl, cute owl, funny owl videos, cute owls, pet owl, owls funny, owl funny, cute owls videos, bird, birds, cuddle, cuddling, baby owl, baby owls, video, clips, moments, psd to html5, psd to html, html5 template, tech tian, how to use owl carousel in 2020, how to use owl carousel 2.3.4, how to use owl carousel in bootstrap 4, testimonial carousel bootstrap 4, bootstrap 4 testimonial carousel, how to create testimonial slider in bootstrap 4, bootstrap testimonial carousel, bootstrap owl carousel testimonial, bootstrap 4, bootstrap 4 carousel, bootstrap 4 carousel multiple items, bootstrap 4 carousel examples, bootstrap 4 carousel multiple items responsive, bootstrap 4 carousel tutorial, bootstrap 4 carousel show 3 items, bootstrap slider examples, bootstrap slider, bootstrap cards, bootstrap tutorials, css slider, bootstrap carousel, cards slider, slick slider, slick slider in html template, how to use slick slider for your website, jquery slick slider tutorial, tutorial, easy slider tutorial, how to use slick slider in html template, responsive slider tutorial, responsive, web design, html css, css in html, website menu, slick, vertical carousel javascript, slick carousel vertical, owl carousel navigation, owl carousel responsive, owl carousel bangla tutorial, html5, owl carousel 2 html5 video, how to use owl carousel in html template, new owl carousel, slider owl carousel, owl carrousel, owl carousel demo, how to add slider owl carrrosul in hindi, web tutorial hindi, jquery plugins, jquery owl carousel plugin, owl carousel plugin tutorial, jquery carousel tutorial, how to use owl carousel plugin, jquery plugin for beginners in hindi, jquery tutorial in hindi, jquery tutorial in urdu, yahoo baba, web design tutorial, animated slider tutorial, animated product slider tutorial, animated carousel slider, gallery slider tutorial, how to use owl carousel with html and css | 2020, bangla wordpress tutorial, web development, freelancing, website development, bangla wordpress theme development, bangla freelancing tutorial, fiverr, upwork, moshiur, codersfoundation, 10 miniute school, ayman sadiq, roasted, exposed, tahseenation exposed, বাংলা নাটক, bangla natok, nobleman, noble roasted, noble exposed, noble, noble scandal, coders foundation, freelancer nasim, jamal sir, jamal sir tutorial, jamal sir protarok, hero alom, image slider html and css javascript, owl carousel slider with bootstrap 5, bootstrap 5 owl carousel, owl carousel plugin with bootstrap 5 explained, owl carousel jquery plugin, jquery plugin owl carousel with bootstrap 5, owl carousel jquery plugin explained, how to use owl carousel in bootstrap 5, owl carousel jquery responsive, owl slider bootstrap 5, owl carousel slider with bootstrap 5 full feature, coding river, slider tutorial javascript, owl carousel 2 custom next prev, owl carousel 2 responsive, owl carousel slider responsive autoplay, image slider javascript, wordpress carousel plugin, responsive carousel, wordpress plugin, wordpress slider, plug-in, jquery carousel plugin, wordpress image carousel plugin, wordpress carousel widget, plugin wordpress, must have wordpress plugins, best wordpress plugins, top wordpress plugins, best free wordpress plugins, top 10 wordpress plugins, carousel slider, testimonial slider, divinector, css glassmorphism, glassmorphism ui, glass morphism, html css3 tutorials, responsive owl carousel, responsive image slider, image slider with text, responsive content slider, bootstrap image slider, how to use owl carousel slider, image slider html css, owl carousel slider jquery, responsive owl carousel slider html and css, responsive image slider css, responsive owl carousel card slider, coding nepal, reactjs, tutorials, okaydexter, simple, http, get, post, request, httprequest, easy, mrbeast, like, subscribe, devto, coder, code, put, delete, modal, signup, form, loginform, videomodal, guide, youtubeapi, dataapiv3, searchapp, github, demoapp, api, carousalcomponent, slideshow html css in hindi, image slider in html, image slider html and css in hindi, image slider css, image slider css html, image slideshow, image slideshow in html, how to create a slideshow, image slider using html and css only, responsive css image slider, css image slider, image slideshow in html and css, html and css slider in hindi, how to make image slider in html and css in hindi, image, css, esponsive image slider, image slider using jquery plugin, responsive image slider using jquery plugin, owl carousel wordpress, owl carousel 2.3.4, owl carousel autoplay, techmemorise, tech memorise, owl carousel in html css javascript, javascript owl carousel, profile card ui design, profile card using html css, html css card design, html css profile card ui, animated profile card in html css, jquery owl carousel, owl carousel card slider in html css javascript, owl carousel image slider javascript, owl carousel image slider, owl slideshow, slideshow, animated slider, animated carousel, animated slideshow, mouse wheel carousel, mouse wheel slideshow, drag carousel, touch carousel, touch slideshow, touch slider, drag slideshow, drag slider, navigation carousel, pagination carousel,bangla wordpress tutorial,web development,freelancing,website development,bangla wordpress theme development,bangla freelancing tutorial,fiverr,upwork,moshiur,codersfoundation,10 miniute school,ayman sadiq,roasted,exposed,tahseenation exposed,বাংলা নাটক,bangla natok,nobleman,noble roasted,noble exposed,noble,noble scandal,coders foundation,freelancer nasim,jamal sir,jamal sir tutorial,jamal sir protarok,wordpress,hero alom,owl carousel,jquery plugin,how to use owl carousel,owl carousel 2 tutorial,how to use owl carousel in your website,owl carousel,owl carousel example,how to install owl carousel 2,how to make a testimonial carousel with owl carousel,owl carousel tutorial,owl carousel slider,owl carousel slider responsive,owl carousel 2,owl carousel slider example code,jquery plugin tutorial,jquery tutorial,owl carousel slider example,how to use owl carousel with html and css | 2020,carousel,web dev,jquery plugins,jquery owl carousel plugin,owl carousel plugin tutorial,jquery carousel tutorial,how to use owl carousel plugin,jquery plugin tutorial,jquery plugin for beginners in hindi,jquery tutorial in hindi,jquery tutorial in urdu,yahoo baba,web design tutorial,animated slider tutorial,animated product slider tutorial,animated carousel slider,gallery slider tutorial
Comments
Post a Comment