CODEWITHSUNDEEP
javascriptjqueryfullpage.js
kumaaa
kumaaa

Reputation: 11

rotate logo after entering a new section

I'm a newbie and I'm using fullpage.js for the first time. I hope you can help me.

So my goal is to rotate my logo by 60deg each time I enter a new section. I have 5 sections.

I've been trying some stuff but its not what i desired. Right now I use this. But it only applies to the section0, section1 and resets at section3.

Why isnt it working?

$(document).ready(function(){
    $('#fullpage').fullpage({

        //options
        sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
        easingcss: 'cubic-bezier(.31,.87,.89,.48)',
        loopTop: true,
        loopBottom: true,
        navigation: true,
        navigationPosition: 'right',

        afterLoad: function(anchor, index) {
            $('#logo').toggleClass('rotate1');
        },
        onLeave: function(index, nextIndex, direction) {
            $('#logo').toggleClass('rotate2');
        }

    });


});
#logo {
    position: fixed;
    width:80px;
    height:80px;
    top: 20px;
    left: 20px;
    z-index: 100;
}
#logo.rotate1 {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#logo.rotate2 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Website</title>

  <link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
  <link rel="stylesheet" href="assets/css/main.css" type="text/css">

  <script type="text/javascript">
  </script>
  
  </head>
  <body>

<img id="logo" src="assets/img/logo.svg">

    <div id="fullpage">
        <div class="section"><h3>Section</h3>1</div>
        <div class="section"><h3>Section</h3>2</div>
        <div class="section"><h3>Section</h3>3</div>
        <div class="section"><h3>Section</h3>4</div>
        <div class="section"><h3>Section</h3>5</div>
    </div>

    
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

  <script src="assets/js/fullpage.min.js" type="text/javascript"></script>
  <script src="assets/js/function.js" type="text/javascript"></script>

  </body>
</html>

Upvotes: 1

Views: 83

Answers (1)

User863
User863

Reputation: 20039

Using jquery data() and css() method

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
    easingcss: 'cubic-bezier(.31,.87,.89,.48)',
    loopTop: true,
    loopBottom: true,
    navigation: true,
    navigationPosition: 'right',

    afterLoad: function(anchor, index) {
      let angle = +$('#logo').data('angle') + 60;
      $('#logo')
        .css({'transform': `rotate(${angle}deg)`})
        .data('angle', angle);
    }
  });
});
#logo {
  position: fixed;
  width: 80px;
  height: 80px;
  top: 20px;
  left: 20px;
  z-index: 100;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.as-console {
  display: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>

<div id="fullpage">
  <div class="section">
    <h3>Section</h3>1</div>
  <div class="section">
    <h3>Section</h3>2</div>
  <div class="section">
    <h3>Section</h3>3</div>
  <div class="section">
    <h3>Section</h3>4</div>
  <div class="section">
    <h3>Section</h3>5</div>
</div>

Upvotes: 1

Related Questions