Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
  • 2 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 62 additions and 1 deletion.
  1. +53 −0 wall3dparallax/index.html
  2. +9 −1 wall3dparallax/script.js
View
53 wall3dparallax/index.html
@@ -13,11 +13,64 @@
width:100%;
height:100%;
position: absolute;
+ background-color:#000;
+ }
+ #wall {
+ display: block;
+ width:1000px;
+ margin: 100px auto 0;
+ }
+ .brick{
+ background-color: #fff;
+ width:100px;
+ height:150px;
+ float: left;
+ position: relative;
+ margin: 5px;
+ background:url(http://dev.codeanywhere.net/107/02f2736173098138e657658095f638f0/loading-img.gif.gif) center no-repeat;
+ }
+ .brick img{
+ opacity: 0;
+ -webkit-transition: opacity 0.3s ease-in-out;
+ -moz-transition: opacity 0.3s ease-in-out;
+ -o-transition: opacity 0.3s ease-in-out;
+ -ms-transition: opacity 0.3s ease-in-out;
+ transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body>
+ <section id="wall">
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/1/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/2/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/3/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/4/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/5/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/6/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/7/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/8/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/9/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/sports/10/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/1/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/2/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/3/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/4/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/5/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/6/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/7/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/8/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/9/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/food/10/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/1/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/2/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/3/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/4/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/5/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/6/" alt=""></div>
+ <div class="brick"><img src="http://lorempixel.com/100/150/people/7/" alt=""></div>
+ </section>
+
<script src="script.js" defer></script>
</body>
</html>
View
10 wall3dparallax/script.js
@@ -5,5 +5,13 @@
*/
!(function ($doc, $win) {
-})(document, window);
+ $imgs = $doc.getElementsByTagName('img'),
+ totalImg = $imgs.length - 1;
+ for (var i = totalImg; i>=0; i--) {
+ $imgs[i].onload = function () {
+ this.style.opacity = 1;
+ }
+ }
+
+})(document, window);

No commit comments for this range

Something went wrong with that request. Please try again.