Menu
Onlain.lt

Sklendžianti logo nuoroda - akcentas

Instrukcija
1) Į Zero Block pridedame 4 Shape elementus, į juos įkeliame logotipus ir suteikiame jiems nuorodą #brand.

2) Pridedamr Shape -> Linija, nustatome jai tokį pat plotį kaip logotipų shape ir suteikiame jai nuorodą #line.

3) Pridedame HTML bloką - Т123
Kode įrašome tekstus, kurie bus virš linijos:

content: "First Brand";
content: "Second Brand";
content: "Third Brand";
content: "Fourth Brand";

*Turėkite omenyje, kad funkcija mobiliuose įrenginiuose korektiškai neveiks, nes juose nėra "hover" komandos, o hover animacija šiuo atveju padaryta kodo, o ne mobilios animacijos pagalba. Ši animacija skirta kompiuteriams ir laptopams.

Kodas


<style>
.line{text-align:center}
.parentLine{ transition:all 0.6s ease-in-out}
.line::before {
    content: "First Brand";
    font-family: 'Roboto',Arial,sans-serif;
    font-weight: 400;
    position: absolute;
    color: #000;
    left: 0%;
    top: -30px;
    width: 100%;
}
.parentLine.position1{transform: translateX(100%)}
.parentLine.position2{transform: translateX(200%)}
.parentLine.position3{transform: translateX(300%)}
.line.text1::before{content: "Second Brand"}
.line.text2::before{content: "Third Brand"}
.line.text3::before{content: "Fourth Brand"}
.squad{ padding: 0 5px}
@media screen and (max-width: 640px){
.line::before{ font-size: 12px;}
}
</style>
<script>
$( document ).ready(function() {
   $('a[href^="#brand"]').addClass('brand squad');
   $('a[href="#line"]').addClass('line squad').parent().addClass('parentLine');
   $('.squad').parent().addClass('squad');
   var lineclass = $('.line').attr('class');
   var prentlineclass = $('.parentLine').attr('class');
   $('.brand').hover(
  function() {
    var position  = $('.brand').index(this);
    $('.line').attr('class' , lineclass+' text'+position);
    $('.parentLine').attr('class' , prentlineclass+' position'+position);
  }, function() { });
});
</script>

Made on
Tilda