Πίσω στο ευρετήριο

javascript and css slideshow Posted: 21-Feb-2020 01:27 AM

javascript, html, css tutorial
Δες το Demo Κατέβασε τα αρχεία 3 downloads

Ένα slideshow είναι πάντα ένα καλό οπτικό εφέ όχι όμως για κάθε ιστοσελίδα.
Ένα slideshow κουμπώνει καλά σε ιστοσελίδες που διαφημίζουν προϊόντα, ένα τέτοιο slideshow θα δούμε παρακάτω γραμμένο σε css και javascript.

Χαρακτηριστικά Slideshow.

  • Οι αλλαγές υποστηρίζονται από ένα fade effect
  • Έχουμε κείμενο στην διαφάνεια
  • Έχουμε ένα cta(call to action) button
  • Είναι responsive
  • Το slideshow σταματάει με τον κέρσορα πάνω του

index.html


<body>
<!-- 
  Στο html αρχείο μας έχουμε μια λίστα με 3 διαφάνειες (slides).
  Η κάθε διαφάνεια έχει από ένα h1(επικεφαλίδα), h3(υπο-κεφαλίδα), h4(απλό κείμενο),
  και ένα cta button με link.  
 -->
<ul id="slides">
    <li class="slide showing">
      <img src="slides/avengers-2.jpg">
      <div class="caption">
        
        <!-- H επικεφαλίδα -->
        <h1>Lorem ipsum dolor sit.</h1>
        
        <!-- Η υπο-κεφαλίδα -->
        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, architecto.</h3>
        <!-- Κείμενο -->
        <h4>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur obcaecati
          culpa alias animi repellendus ullam fuga, labore! 
          Aliquam, reprehenderit voluptates inventore
        </h4>
        
        <!-- cta button με javascript link -->
        <button onclick="window.open('https://phpdev.gr/', 'blank')" class="buy-now">Watch now</button>
        <!--
          Συνηθίζω να χρησιμοποιώ javascript για link σε buttons, βρίσκω ότι μου κολλάει
          οπτικά καλύτερα. Αν και νομίζω ότι το googlebot δεν καταχωρεί javascript href’s.
        -->
      </div>
    </li>
    
    <li class="slide">
      <img src="slides/ironman.jpg">
      <div class="caption">
        <h1>Lorem ipsum dolor sit.</h1>
        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, architecto.</h3>
        <h4>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur obcaecati
           culpa alias animi repellendus ullam fuga, labore! 
           Aliquam, reprehenderit voluptates inventore
        </h4>
        <button onclick="window.open('https://phpdev.gr/', 'blank')" class="buy-now">Watch now</button>
      </div>

    </li>
    <li class="slide">
      <img src="slides/spiderman-2.jpg">
      <div class="caption">
        <h1>Lorem ipsum dolor sit.</h1>
        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, architecto.</h3>
        <h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur obcaecati
            culpa alias animi repellendus ullam fuga, labore! 
            Aliquam, reprehenderit voluptates inventore
        </h4>
        <button onclick="window.open('https://phpdev.gr/', 'blank')" class="buy-now">Watch now</button>
      </div>
    </li>
</ul>

<script src="script.js"></script>
</body>

Εδώ μπορείτε να μάθετε περισσότερα για την window.open() που χρησιμοποίησα αντί για a.href στο cta button.

style.css


*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  font-family: ubuntu, sans-serif;
}

/* Όλη η ουσία του slideshow για να δουλέψει είναι οι τρείς
   επόμενες κλάσεις, που θα καλέσουμε μέσω της javascript 
*/
#slides { 
  position: relative;
  height: 400px; /* Καθορίζουμε το υψος του slideshow */
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  box-shadow: 0 3px 5px rgba(0,0,0, .3);
}
/* Η .slide είναι η default class για όλα τα slide */
.slide {
  position: absolute; /* Καθορίζουμε την θέση των slides, όλα τα ...*/
  left: 0px;          /* .. slides εχουν την ιδια θέση αυτό σημαίνει ... */
  top: 0px;           /* .. οτι το ένα είναι πάνω στο άλλο */
  width: 100%;
  height: 100%;
  opacity: 0; /* εξ αρχής καμία διαφάνεια δεν είναι ορατή */
  z-index: 1;
  -webkit-transition: opacity 3s; 
  -moz-transition: opacity 3s;
  -o-transition: opacity 3s;
  transition: opacity 3s;
}
/* Σε όποια διαφάνεια ανατίθετε η .showing γίνετε ορατή
  αυτό θα γίνει μέσω javascript */
.showing {
  opacity: 1;
  z-index: 2;
}

#slides img{
  object-fit: cover;
  width: 100%;
  height: inherit;
}

#slides .caption{
  position: absolute; /* Προσδιορίζουμε την θέση των στοιχείων πάνω στο slide */
  top: 0%;
  left: 0%;
  z-index: 99;
  width: 100%;
  color: #fff;
  padding: 30px;
  text-align: center;
}

#slides h1,
#slides h2,
#slides h3,
#slides h4{
  font-weight: 300;
  margin-top: 20px;
  line-height: 24px;
}

/* Εδω έχουμε το styling του button της διαφάνειας */
#slides .buy-now{
  margin-top: 50px;
  
  /* Για να αλλάξεις τις διαστάσεις, παίξε με το padding */ 
  padding: 12px 50px; /* Η πρώτη τιμή δίνει ύψος και η δευτερη πλάτος. */

  font-size: 16px;
  background-color: #0b9c2a;
  border: thin solid #01ff37;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset 0 0 20px #000;
}

#slides .buy-now:hover{
  background-color: transparent;
}

/* Εαν το πλατος το browser ξεπερνά τα 768px ... */
@media screen and (min-width: 768px){
  #slides .caption{
    /* ... όλα τα στοιχεία μέσα στήν διαφάνεια θα 
    πάνε προς τα αριστερά */
    text-align: left; 
  }
}

/* Εαν το πλατος το browser ξεπερνά τα 968px ... */
@media screen and (min-width: 968px){
  #slides, #slides img{
    /* ... oι διαφάνειες θα έχουν ύψος 450px */
    height: 450px;
  }
  
  #slides .caption{
    padding: 50px;
  }

  #slides h4{
    width: 55%;
    line-height: 22px;
  }
}  

script.js


// Πρώτα θα δημιουργήσουμε μια μεταβλητή και με την querySellectorAll()
//θα πάρουμε όλα τα στοιχεία slides και θα τα αναθέσουμε σε αυτήν.
let slides = document.querySelectorAll('#slides .slide');
// Μετά θα ορίσουμε μια μεταβλητή για να παρακολουθεί το τρέχων slide 
// η τιμή 0 σημαίνει οτι η currentSlide θα έχει τιμή την πρώτη διαφάνεια. 
let currentSlide = 0;

// Και θα χρειαστούμε μια μεταβλητή για να ορίσουμε τον χρόνο (ταχύτητα) που 
// θα εναλλάσσονται οι διαφάνειες.
let time = 4000;

// Θα γράψουμε μια συνάρτηση την nextSlide() η οποία θα παρακολουθεί την τρέχων
// διαφάνεια και θα της αλλάζει την css class.
function nextSlide() {
    // Πρώτα θα αλλάξουμε το τρέχων slide ώστε να μην είναι ορατό.
    slides[currentSlide].className = 'slide';

    // Μετά θα προσθέσουμε +1 στο τρέχων slide (currentSlide) αλλά θα χρησιμοποιήσουμε
    // τον τελεστή % (παίρνουμε το υπόλοιπο από την διαίρεση) για να πάρουμε πάλι την τιμή
    // 0 όταν φτάσουμε στο τελευταίο slide.
    // Επεξήγηση:
    // Στήν περίπτωση μας έχουμε 3 slides, δείτε τώρα τι τιμές παίρνει η currentSlide
    // 1%3=1 (δεύτερο slide), 2%3=2 (τριτο slide), 3%3=0 (και πάλι στο πρώτο)   
    currentSlide = (currentSlide+1) % slides.length; // slides.length = 3, ο αριθμος των slide μας
    
    // Τώρα που έχουμε τον αριθμό του νέου slide θα αλλάξουμε την css class του σε ορατό 
    slides[currentSlide].className = 'slide showing';
}

// Τώρα θα αρχήσουμε να τρέχουμε την nextSlide που γράψαμε ανα διαστήματα που έχουμε ορίσει
// στην time(4000s)
let slideInterval = setInterval(nextSlide, time);

// Εδώ θα σταματάει το slideshow όταν περνάει το ποντίκι από πάνω του.
document.querySelector('#slides').addEventListener('mouseover', function(e){
  clearInterval(slideInterval);
});

// Και έδω θα ξεκινάει το slideshow πάλι όταν το ποντίκι(κέρσορας) απομακρυνθεί
// πάνω από την διαφάνεια.
document.querySelector('#slides').addEventListener('mouseout', function(e){
  slideInterval = setInterval(nextSlide, time);
});

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις και τελεστών που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια javascript tutorials

Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript

css Tutorials

Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες

php Tutorials

Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση.

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')