扁平视差滑动HTML模板是一款超酷带视差滑动效果的扁平化设计模板。_html网站模板_网页源码移动端前端_H5模板

共29个文件

png：17个

js：7个

css：2个

网站模板

137 浏览量 2023-08-06 12:14:00 上传评论收藏 98KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

扁平视差滑动HTML模板是一款超酷带视差滑动效果的扁平化设计模板。_html网站模板_网页源码移动端前端_H5模板_自.rar （29个子文件）

扁平视差滑动HTML模板是一款超酷带视差滑动效果的扁平化设计模板。

chahua3369

jquery.magnific-popup.js 45KB

easing.js 5KB

cbpScroller.js 3KB

classie.js 2KB

move-top.js 1KB

modernizr.custom.js 8KB

jquery.min.js 90KB

css

style.css 12KB

popuo-box.css 6KB

index.html 11KB

images

strip-bg.jpg 22KB

mail.png 295B

iphone-big.png 2KB

logo.png 1KB

social-icons.png 10KB

home.png 1KB

about.png 1KB

contact.png 1KB

nav.png 204B

email.png 295B

move-top.png 226B

beer.png 240B

close.png 387B

ipad.png 3KB

download-icon.png 307B

portfolio.png 1KB

devices.png 4KB

header-bg.jpg 40KB

dribbble.png 406B

<!DOCTYPE HTML> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>   <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/modernizr.custom.js" type="text/javascript"></script> <script type="text/javascript" src="js/move-top.js"></script> <script type="text/javascript" src="js/easing.js"></script> <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/> <script src="js/jquery.magnific-popup.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); }); }); </script> </head> <body> <div class="header"> <div class="wrap"> <div class="header_top"> <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div> <div class="menu"> <a href="#" class="right_bt" id="activator"><img src="images/nav.png" alt="" /></a> <div class="box" id="box"> <div class="box_content"> <div class="box_content_center"> <div class="form_content"> <div class="menu_box_list"> <ul> <li><a href="#"><i><img src="images/home.png" alt="" /></i><span>home</span></a></li> <li class="active"><a href="#about" class="scroll"><i><img src="images/about.png" alt="" /></i><span>about me</span></a></li> <li><a href="#portfolio" class="scroll"><i><img src="images/portfolio.png" alt="" /></i><span>portfolio</span></a></li> <li><a href="#contact" class="scroll"><i><img src="images/contact.png" alt="" /></i><span>drop me a line</span></a></li> </ul> </div> <a class="boxclose" id="boxclose"><img src="images/close.png" alt=""></a> </div> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> <script type="text/javascript"> var $ = jQuery.noConflict(); $(function() { $('#activator').click(function(){ $('#box').animate({'top':'0px'},500); }); $('#boxclose').click(function(){ $('#box').animate({'top':'-700px'},500); }); }); $(document).ready(function(){ //Hide (Collapse) the toggle containers on load $(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) $(".trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor }); }); </script> </div> <div class="clear"></div> </div> <div class="header_desc"> <h1>Meet Perth,</h1> <p>A stupidly simple, flat PSD. Oh yeah, it's <span>free</span> too!</p> <div class="button"><a href="http://w3layouts.com/" target="_blank" >Download <i><img src="images/download-icon.png" alt="" /></i></a></div> <div class="iphone_img"> <img src="images/iphone-big.png" alt="" /> </div> </div> </div> </div> <div class="content"> <div id="cbp-so-scroller" class="cbp-so-scroller"> <div class="content_top"> <div class="ipad_desc" id="about"> <h2>A Longwinded Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p> <p class="italic">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <div class="button green"><a class="popup-with-zoom-anim" href="#small-dialog">Say Hello <i><img src="images/mail.png" alt="" /></i></a> <div id="small-dialog" class="mfp-hide"> <div class="comments-area"> <form> <div> <span class="label"><label>Your Name <span class="red">*</span></label></span> <span class="text-field"><input name="userName" type="text" class="textbox"></span> <div class="clear"></div> </div> <div> <span class="label"><label>E-mail <span class="red">*</span></label></span> <span class="text-field"><input name="userEmail" type="text" class="textbox"></span> <div class="clear"></div> </div> <div> <span class="label"><label>Website Name</label></span> <span class="text-field"><input type="text" class="textbox"></span> <div class="clear"></div> </div> <div> <span class="label"><label>Description <span class="red">*</span></label></span> <span class="text-field"><textarea name="userMsg"> </textarea></span> <div class="clear"></div> </div> <div> <span class="text-field"><input type="submit" value="Submit" class="myButton"></span> <div class="clear"></div> </div> </form> </div> </div> <script> $(document).ready(function() { $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-zoom-in' }); }); </script> </div> </div> <div class="ipad_img"> <section class="cbp-so-section cbp-so-init cbp-so-animate"> <article class="cbp-so-side cbp-so-side-right"> <img src="images/ipad.png" alt=""> </article> </section> </div> <div class="clear"></div> </div> <div class="content_bottom" id="portfolio"> <div class="devices"> <section class="cbp-so-section cbp-so-init"> <article class="cbp-so-side cbp-so-side-left"> <img src="images/devices.png"

评论收藏

内容反馈