Εγγραφή

Αλλαγή Css background αναλόγως του άρθρου.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Αλλαγή Css background αναλόγως του άρθρου.

Δημοσίευση  vagelis199 Την / Το Παρ Μαρ 25, 2016 6:06 pm

Θα σας δειξω πως μπορείτε να προσαρμόσετε το background της ιστοσελίδας σας ανάλογα με την ετικέτα του άρθρου σας,Δηλαδή όταν ανοιγετε ένα άρθρο με την ανάλογη ετικέτα το background της ιστοσελίδας προσαρμόζεται με το θέμα του άρθρου και γενικά μπορείτε να προσαρμόσετε ότι θέλετε σχετικα με το Css η ακόμη και το html. Εγώ αυτόν τον κωδικό τον έφτιαξα ιδικά για το gretaku.com όποτε θα πρέπει να τον προσαρμόσετε ανάλογα για την δικιά σας ιστοσελίδα. Για να το καταφέρετε αυτό χρειαζετε να εχετε ενσωμάτωση το Jquery στην σελίδα σας, αυτό είναι απλό παίρνετε τον παρακάτω κώδικα και τον βάζετε στο head της ιστοσελίδας σας
Κώδικας:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Επειτα ξεκινάμε εγω αυτο που εφάρμοσα είναι η αλλαγη του background από το body αλλα αυτο που δεν μου αρεσε ειναι πως μπανει καπος αποτομα το background όποτε ειπα μιας και εχω το Jquery στα χέρια μου ας βάλω ενα εφε, Fade δηλαδή να εμφανίζεται σιγά. Φισικα μπορειτε να πατε απεθιας αλλαζοντας το css του body αλλα εγω εδω θα σας διξω τον τροπο με το εφε. Να εμφανισω ενα background στο body με εφφε δεν γίνετε, ο τροπος για να πετύχω αυτο ειναι να φτιαξω ενα ξεχωριστώ Div στο οπιο θα εφαρμόσω το fade εφε με την φόρτωση της σελίδας φυσικά το div θα ειναι εξαρχεις φορτωμένο με το background και θα βρίσκεται σε display:none μορφή το div το φτιάχνουμε αμεσα μετα την ετικετα body διλαδι θα ειναι κάπως ετσι
Κώδικας:
<body>  <div id="bodybackground"></div>
επειτα στο css μας βαζουμε τα εξεις

Κώδικας:
#bodybackground{
display:none;
position:fixed;
height: 100%;
width:100%;
  background-repeat: no-repeat;
background-size:cover;
}
Εξηγηση: ο λογος που το βαζουμε ως display:none ειναι επιδι θελουμε να μην ειναι εμφανες εξαρχεις και να εμφανιζετε με εφε που θα βαλουμε οταν ο κοδικος αναγνοριζει την ετικετα του αρθρου μας.
το position ειναι fixed οστε το div να ειναι πίσω απολα και να ακολουθη το scrolling. το width και το height ειναι 100% για να πιανει ολοι την σελιδα και το background-repeat σε no-repeat για να μην σινεχιζει το background μιας και θα το εχουμε το μεγεθος του ως cover διλαδι να πιανει ολο το div ασχετος το μεγεθος του.

επιτα παμε στο τελος του body διλαδι στο
Κώδικας:
εδω</body>
και ανιγουμε μια ετικετα script εδω θα βαλουμε τον javascript κώδικα μας, ο λογος που το βαζουμε στο τελος του body ειναι επιδι θελουμε να τρεχει ο κοδικος εφοσος το ικαστικο κοματι της σελιδας εχει φορτοση, ξεκιναμε με το jquery εχονας γνοση που βρισκετε το κιμενο της ετικετας που ψαχνουμε εγω το εχω στο .post-labels βαζουμε καταλιλα.
Κώδικας:
<script>

$('.post-labels:contains("Pokémon")').each(function () {
  $('#bodybackground').css('background-image','url(https://lh3.googleusercontent.com/-4ikeJ2N4_EM/VvQCCcW-zOI/AAAAAAAAHuQ/cYd56rarm7YpFQo6QKT0qAdP79VuEPV_QCCo/s2048-Ic42/pokemongobackground.jpg)');
$(window).load(function(){
$("#google-ad").css("border-bottom","0px");
  $( "#bodybackground" ).fadeIn( "slow");
});
});

</script>

_________________
email me vagelis@gtagreece.com
avatar
vagelis199

Αριθμός μηνυμάτων : 47
Ημερομηνία εγγραφής : 03/06/2015
Ηλικία : 20

Επισκόπηση του προφίλ των χρηστών http://www.gtagreece.com

Επιστροφή στην κορυφή Πήγαινε κάτω


Τα link's για το κατέβασμα είναι κρυφά πρέπει να είστε χρήστης του forum για να τα δείτε (κάντε δωρεάν εγγραφη "http://forum.gtagreece.com/register").

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης