scroll zoom text

Question

scroll zoom text

Navigation

#1 by (1 votes)

4

I have this code link that zooms in on a text while you scroll. The issue is that the mommemento apply to the code I have does not work as it should, maybe I'm missing something or I'm forgetting to add something else? this is the code on the page

<!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>

Thanks for your help and your time.

This is the code with the changes made, it would only 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 zoom css

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

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

bootstrap scroll zoom

asked by Jorge Alarcon 30.08.2018 в 23:41

source

1 answer

Problem with setTimeout date format to string in java with apache from excel

score 1 · Accepted Answer

Ok, checking your code and the code of the page to which you send your link, 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 you scroll the div size increases. When you have such a small heigth on your page, it returns a very small value in this calculation, so that the text is imperceptible:

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

Here are two options:

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

Although I suppose that doing this would destroy your design and it is not what you are looking for.

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

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

Note that instead of dividing by 1000, divide by 100. You can play with this value to adjust the size the div will take according to your convenience. * I also 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 could help you. Remember to rate the answer as valid to help others with your same problem in the future.