Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

Πολλαπλά paralax σαν συμπληρωματικές εικόνες

parallax

Ένα από τα ποιο ωραία εφέ που βρήκαμε με Parallax το οποίο δημιουργεί την αίσθηση της αλληλοεπικάλυψης εικόνων.

Το αποτέλεσμα μπορείτε να το δείτε εδώ

http://codepen.io/avasil/full/LNgOBL/

Κώδικας HTML

<div class="parallax">
  <div class="bg__foo"> </div>
  <div class="bg__bar clip-svg3"> </div>
  <div class="bg__baz clip-svg3"> </div>
</div>

 

Κώδικας CSS

.parallax .bg__foo, .parallax .bg__bazz {
    height: 100vh;
   background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    position: relative;
    text-indent: -9999px;
}
.parallax .bg__foo {
    background-image: url(../../../images/site/first.jpg);
}
.parallax .bg__bar {
    background-image: url(../../../images/site/second.jpg);
   background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    height: 100vh;
    position: relative;
    text-indent: -9999px;
}
.parallax .bg__baz {  
  background-image: url('/../../../images/site/last.jpg');
   background-attachment: fixed;
   background-position: center top;
   background-size: cover;
   height: 100vh;
   position: relative;
   text-indent: -9999px;
}

Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords