Hiệu ứng ảnh 3d biến đổi theo thanh cuộn. Hiệu ứng javascript cực đẹp -- thantienvxp

<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />

Pair of Vintage Old School Fru

Trang Chủ

Giới Thiệu

Blog

Tìm kiếm

Quảng cáo:

Trang chủ > Share code xtgem

Hình ảnh

» Thể loại: Share code xtgem
» Last Updated: 13/06/16
» Lượt xem: 1337 Views

Nội dung:

Hiệu ứng ảnh 3d biến đổi theo thanh cuộn. Hiệu ứng javascript cực đẹp.

Giới thiệu: Khi bạn kéo thanh cuộn từ trên xuống các bức ảnh sẽ có hiệu ứng to dần và mờ dần đi như kiểu nó đang ngày càng gần bạn hơn. Các bức ảnh tiếp theo sẽ xuất hiện và biến mất y như bức ảnh đầu tiên. Khi hết ảnh sẽ xuất hiện một thông báo. Khi bạn kéo chuột ngược lại hiệu ứng sẽ chạy ngược lại.

Tải về:

Functions.js
jquery.mousewheel.js
jquery-latest.min.js
style.css

HTMl:

<div id="wrapper" >
           <div id="environment">
		<div id="main" style="transform: translate3d(0px, 0px, 44px);">
		
		
		<img src="" data-idx="" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, px);-moz-transform: translate3d(0px, 0px, px);-ms-transform: translate3d(0px, 0px, px);-o-transform: translate3d(0px, 0px, px);transform: translate3d(0px, 0px, px);">
		
		<img src="" data-idx="1" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -1000px);-moz-transform: translate3d(0px, 0px, -1000px);-ms-transform: translate3d(0px, 0px, -1000px);-o-transform: translate3d(0px, 0px, -1000px);transform: translate3d(0px, 0px, -1000px);">
		
		<img src="" data-idx="2" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -2000px);-moz-transform: translate3d(0px, 0px, -2000px);-ms-transform: translate3d(0px, 0px, -2000px);-o-transform: translate3d(0px, 0px, -2000px);transform: translate3d(0px, 0px, -2000px);">
		
		<img src="" data-idx="3" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -3000px);-moz-transform: translate3d(0px, 0px, -3000px);-ms-transform: translate3d(0px, 0px, -3000px);-o-transform: translate3d(0px, 0px, -3000px);transform: translate3d(0px, 0px, -3000px);">
		
		<img src="" data-idx="4" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -4000px);-moz-transform: translate3d(0px, 0px, -4000px);-ms-transform: translate3d(0px, 0px, -4000px);-o-transform: translate3d(0px, 0px, -4000px);transform: translate3d(0px, 0px, -4000px);">
		
		<img src="" data-idx="5" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -5000px);-moz-transform: translate3d(0px, 0px, -5000px);-ms-transform: translate3d(0px, 0px, -5000px);-o-transform: translate3d(0px, 0px, -5000px);transform: translate3d(0px, 0px, -5000px);">
		
		<img src="" data-idx="6" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -6000px);-moz-transform: translate3d(0px, 0px, -6000px);-ms-transform: translate3d(0px, 0px, -6000px);-o-transform: translate3d(0px, 0px, -6000px);transform: translate3d(0px, 0px, -6000px);">
		
		<img src="" data-idx="7" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -7000px);-moz-transform: translate3d(0px, 0px, -7000px);-ms-transform: translate3d(0px, 0px, -7000px);-o-transform: translate3d(0px, 0px, -7000px);transform: translate3d(0px, 0px, -7000px);">

</div>
           </div>
         
         <div id="loading"><p style="margin-top: 295px;">Xin chờ admin upload thêm ảnh!</p></div>
           </div>
	</div>

Bạn có thể thấy các thẻ html img có giá trị trong các thẻ data-idx tăng dần và trong transform giảm dần. Nếu muốn thêm ảnh chỉ cần làm đúng theo quy luật trên là được. Dòng chữ trong thẻ p cuối cùng dùng để hiện thông báo khi hết ảnh.

Demo

Bài viết cùng chủ đề

Share code html, css cơ bản cho làm wap

Làm wap ai cũng phải biết html và css, với những code html, css cơ bản chắc chắn sẽ giúp bạn rất nhiều....

Hướng dẫn làm một trang điều hướng báo lỗi 404

Đối với mỗi trang wap một trong những thứ cơ bản và không thể thiếu là trang 404. Vậy làm sao để tạo được một trang 404 ?...

Bảng mã màu HEX đầy đủ cho html, css

Bảng mã màu đầy đủ cho làm web/wap rất hữu dụng là thứ không thể thiếu với các wapmaster ...

Exchanger

U-ON

c-stat

Sitemap.html Sitemap.txt Sitemap.xml

Some Web: Thanhgiang642.wordpress.com tailieu642.xtgem.com