Ch\u00e0o c\u00e1c b\u1ea1n, h\u00f4m nay m\u00ecnh s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n th\u00eam m\u1ed9t m\u1eabu slider full m\u00e0n h\u00ecnh v\u1edbi s\u1ef1 h\u1ed7 tr\u1ee3 c\u1ee7a TweenMax.min.js v\u00e0 CSS3.<\/p>\n\n\n\n
\u0110\u1ea7u ti\u00ean, c\u00e1c b\u1ea1n x\u00e2y d\u1ef1ng khung chu\u1ea9n html cho slider nh\u01b0 sau:<\/p>\n\n\n
\n<div class="box slide"><span>What else you want ! ;)<\/span><\/div>\n<div class="box slide"><span>Super Simple<\/span><\/div>\n<div class="box slide"><span>Responsive<\/span><\/div>\n<div class="box slide"><span>GSAP Timeline<\/span><\/div>\n<div class="box slide"><span>Full Screen Slider (linear) #2<\/span><\/div>\n \n<div id="nav">\n <div id="prevtBtn" class='fa fa-chevron-circle-left'><\/div>\n <div id="nextBtn" class='fa fa-chevron-circle-right'><\/div>\n<\/div>\n<div id="Dots"><\/div>\n<\/pre><\/div>\n\n\nCSS<\/h2>\n\n\n\n
Sau \u0111\u00f3 d\u1ecbnh d\u1ea1ng slider v\u1edbi \u0111o\u1ea1n css b\u00ean d\u01b0\u1edbi.<\/p>\n\n\n
\nbody,html{ width: 100%; height: 100%;}\nbody {\n background-color: #222;\n padding: 0px;\n margin: 0px;\n overflow: hidden;\n}\n\n#nav{ position: relative; z-index:5000; text-align: center; }\n\n#Dots{\n position: absolute;\n z-index:5000;\n bottom:40px; left:50%;\n transform:translate(-50%,0%);\n}\n\n.Dot{\n width:8px;\n height: 8px;\n border-radius: 50%;\n position: relative;\n float: left;\n background-color: #fff;\n opacity:1;\n margin:5px; margin-bottom:0px;\n cursor: pointer;\n border:2px solid rgba(255,255,255,0.7);\n}\n\n#prevtBtn,#nextBtn{\n color: white;\n font-size: 45px;\n margin: 15px 15px 0px 15px;\n position: relative;\n}\n\n.box {\n width: 100%;\n height: 100%;\n position: absolute;\n text-align: center;\n font-size: 40px;\n color: white;\n font-family:'Oswald', arial;\n top:0px;\n left:0px;\n}\n.slide span{\n display:block;\n position:absolute;\n -webkit-transform:translate(-50%,-50%);\n -ms-transform:translate(-50%,-50%);\n transform:translate(-50%,-50%);\n left:50%; top:45%;\n}\n\n.box:nth-child(1) {\n background-color: #ff002f;\n}\n.box:nth-child(2) {\n background-color: #00718b;\n}\n.box:nth-child(3) {\n background-color: #4a5619;\n}\n.box:nth-child(4) {\n background-color: #ff002f;\n}\n.box:nth-child(5) {\n background-color: #006f73;\n}\n\n#logo {\n border-radius: 50%;\n position:absolute;\n z-index:5000;\n top:20px; left:20px;\n}\n\n#links{z-index:500;position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:14px;font-family:tahoma;color:#fff;}\n#links a{text-decoration:none;font-size:2.3em;color:#fff;}\n#twitter{position:absolute;bottom:15px;right:20px;}\n#pens{position:absolute;bottom:15px;left:20px;}\n<\/pre><\/div>\n\n\nJavascript<\/h2>\n\n\n\n\/* a Pen by DIACO : twitter.com\/Diaco_ml || codepen.io\/MAW\npowered by GSAP : http:\/\/www.greensock.com\/\n*\/\n \nvar slides=document.querySelectorAll('.slide'),tl=new TimelineLite({paused:true});\nfor(var i=slides.length;i--;){\n var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i;\n D.addEventListener('click',function(){ tl.seek(this.id).pause() });\n document.getElementById('Dots').appendChild(D);\n tl.add('Dot'+i)\n if( i < 0 ){\n if(i!=slides.length-1){tl.addPause()}\n tl.to(slides[i],0.5,{scale:.5,ease:Back.easeOut})\n .to(slides[i],0.7,{xPercent:-50},'L'+i)\n .from(slides[i-1],0.7,{xPercent:50},'L'+i)\n .to('#Dot'+i,0.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)\n .set(slides[i],{zIndex:1-i}).set(slides[i-1],{zIndex:slides.length})\n .from(slides[i-1],0.5,{scale:.5,ease:Back.easeIn})\n };\n};\n\nfunction GO(e){\n var SD=isNaN(e)?e.wheelDelta||-e.detail:e;\n if(SD > 0){tl.play()}else{tl.reverse()};\n};\n \ndocument.addEventListener("mousewheel",GO);\ndocument.addEventListener("DOMMouseScroll",GO);\ndocument.getElementById('nextBtn').addEventListener("click",function(){GO(-1)});\ndocument.getElementById('prevtBtn').addEventListener("click",function(){GO(1)});\n \n\/\/ a Pen by DIACO : twitter.com\/Diaco_ml || codepen.io\/MAW\n<\/pre><\/div>\n\n\nTr\u01b0\u1edbc khi ch\u00e8n \u0111o\u1ea1n script th\u00ec c\u00e1c b\u1ea1n nh\u1edb ch\u00e8n th\u01b0 vi\u1ec7n TweenMax.min.js v\u00e0o tr\u01b0\u1edbc, th\u01b0 vi\u1ec7n n\u00e0y c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i v\u1ec1 t\u1ea1i m\u1ee5c donwload.<\/p>\n\n\n\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng !<\/p>\n","protected":false},"excerpt":{"rendered":"
Ch\u00e0o c\u00e1c b\u1ea1n, h\u00f4m nay m\u00ecnh s\u1ebd chia s\u1ebb cho c\u00e1c b\u1ea1n th\u00eam m\u1ed9t m\u1eabu slider full m\u00e0n h\u00ecnh v\u1edbi […]<\/p>\n","protected":false},"author":6,"featured_media":6864,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-5372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-thu-thuat-jquery"],"views":477,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=5372"}],"version-history":[{"count":16,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5372\/revisions"}],"predecessor-version":[{"id":8543,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/5372\/revisions\/8543"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/6864"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=5372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=5372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=5372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}