Home / Questions / 192914
Accepted
Jorge Alarcon
Asked: 2020-08-31 13:41:35 +0800 CST 2020-08-31 13:41:35 +0800 CST

scroll zoom text

  • 772

I have this code https://codepen.io/c0deish/pen/yiAjo/ that zooms in on a text as you scroll. The issue is that at the moment applying it to the code I have doesn't work as it should, am I missing something or am I forgetting to add something else? this is the page code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>D 3.0</title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/ox.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,900" rel="stylesheet">
<link rel="stylesheet" href="style.css">

</head>

<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#about">SERVICIOS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#services">STATEMENT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#contact">CONTACTO</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<header class="bg-primary">
    <div class="container text-center">
        <h1>Welcome to Scrolling Nav</h1>
        <p class="lead">A landing page template freshly redesigned for Bootstrap 4</p>
    </div>
</header>

<section id="about" class="bg-azul">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <h2 class="thing">About this page</h2>
                <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>

            </div>
        </div>
    </div>
</section>

<section id="services" class="bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 mx-auto text-center">
                <h2 class="thingm">¿Cómo estás conectando tu audiencia?</h2>
                <div class="espacio"></div>
                <h2 class="thingm">¿Tus acciones de marketing son realmente efectivas?</h2>
                <div class="espacio"></div>
                <div id="scroller">
                    <div class="inner">texto zoom</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <h2 class="thing">Información de Contacto</h2>
                <hr width="50%" />
                <div class="espacio"></div>
                <!-- <p class="leaf"><i class="fas fa-map-marker-alt"></i>  direccion</p>
        <p class="leaf"><i class="fas fa-phone-square"></i>  telefono 1<br><i class="fas fa-mobile"></i>  telefono 2</p>
        <p class="leaf"><i class="fas fa-envelope"></i> correo 1<br><i class="fas fa-envelope"></i> correo 2 </p> -->

            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="py-5 bg-dark">
    <div class="container">
        <p class="m-0 text-center text-white" style="font-size: 0.7rem;">d2018</p>
    </div>
    <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="index.js"></script>

</body>

</html>

The text that should have the effect is this:

<div class="inner">texto zoom</div>

Thank you for your help and your time.

This is the code with the changes made, it only remains to solve the width problem, I applied max-width with a value of 100vw but it did not work.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>D 3.0</title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/ox.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,900" rel="stylesheet"> 
<link rel="stylesheet" href="style.css">

</head>

<body id="page-top">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#about">SERVICIOS</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#services">STATEMENT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">CONTACTO</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<header class="bg-primary">
  <div class="container text-center">
    <h1>Welcome to Scrolling Nav</h1>
    <p class="lead">A landing page template freshly redesigned for Bootstrap 4</p>
  </div>
</header>

<section id="about" class="bg-azul">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2 class="thing">About this page</h2>
        <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>

      </div>
    </div>
  </div>
</section>

<section id="services" class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mx-auto text-center">
        <h2 class="thingm">¿Cómo estás conectando tu audiencia?</h2>
        <div class="espacio"></div>
        <h2 class="thingm">¿Tus acciones de marketing son realmente efectivas?</h2>
        <div class="espacio"></div>

            <div id="scroller">
        <div class="inner thingm" >Únete a</div>

      </div>

      </div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <h2 class="thing">Información de Contacto</h2>
         <hr width="50%" />
        <div class="espacio"></div>
         <p class="leaf"><i class="fas fa-map-marker-alt"></i>  direccion</p>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white" style="font-size: 0.7rem;">d2018</p>
  </div>
  <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script  src="index.js"></script>

</body>

</html>

This is the zoom js

    $(window).scroll(function(){
 var top = $(window).scrollTop(),
  scale = top / 100;
 $('.inner').css({
  'transform':'scale('+scale+','+scale+')','-webkit-  transform':'scale('+scale+','+scale+')'
 });
 });

the css of the zoom

 .inner{
 color: #000;
 font-size:2rem
     }

 #scroller {
 min-height: 300px;
 position:relative;
         }
bootstrap

1 Answers

  1. Best Answer

    Ok, reviewing your code and the code of the page your link sends me to, I noticed that for the effect to work you need to specify a height in the styles as it is done here:

    #scroller {
  min-height: 1000px;

  position:relative;
}

    In such a way that as the size of the div is scrolled, it increases. By having such a small height on your page, it returns a very small value in this calculation, so the text is unnoticeable:

    $(window).scroll(function(){
  var top = $(window).scrollTop(),
      scale = top / 1000;
  $('.inner').css({
      'transform':'scale('+scale+','+scale+')','-webkit-transform':'scale('+scale+','+scale+')'
  });
});

    Here you have two options:

    1) Give the div a much larger height with the scroller class as is done in the example page you posted, where min-height:1000px is specified .

    Though I guess doing this would destroy your layout and it's not what you're after.

    2)Change the value by which the scale variable is divided :

    $(window).scroll(function(){
  var top = $(window).scrollTop(),
      scale = top / 100;
  $('.inner').css({
      'transform':'scale('+scale+','+scale+')','-webkit-transform':'scale('+scale+','+scale+')'
  });
});

    Notice that instead of dividing by 1000, I divide by 100. You can play around with this value until you adjust the size the div will take to your liking. *Additionally I changed some css rules:

    .inner{
color: #fff,
font-size:10em
}

    by:

    .inner{
color: #000,
font-size:2rem
}

    With these changes I got the text to have the effect you wanted. I hope I was able to help you. Remember to rate the answer as valid to help other people with the same problem in the future.

    • 2