What is the best way to adjust the height and width of a div when it comes into view through scrolling?

Question

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view?

HTML

<div id="contact" class="fadeInBlock">
    <div class="map">
        <div class="pointer">
            <div class="dot"></div>
        </div>
        <div class="address">
            <address></address>
        </div>
    </div>
</div>

(The div that will change height and width is the .pointer).

JS

$(function() {
    $(window).load(function() {
        $('.pointer').css({"width": "60px", "height": "60px"});
    });
});

I have only addressed changing the width and height. If there is any confusion, please let me know so I can clarify further.

javascript jquery html css

Answer 1

Answer №1

JavaScript

$(document).ready(function() {
    $(window).on('load', function() {
        $('.pointer').css({'height':($(window).height())+'px'});
    });
});

Answer 2

JavaScript

$(document).ready(function() {
    $(window).on('load', function() {
        $('.pointer').css({'height':($(window).height())+'px'});
    });
});

Answer 3

Answer №2

If you're looking for a way to create a bouncing effect with width and height, one approach is to store the animation points and loop through the animate function multiple times.

While others may have provided strategies for the scroll event, I wanted to address your specific request for the bouncing effect as well.

I hope this solution proves helpful,

Sincerely, Tim

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '50px',
            width: '50px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '100px',
            width: '100px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '75px',
            width: '75px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '200px',
            width: '200px'
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Answer 4

If you're looking for a way to create a bouncing effect with width and height, one approach is to store the animation points and loop through the animate function multiple times.

While others may have provided strategies for the scroll event, I wanted to address your specific request for the bouncing effect as well.

I hope this solution proves helpful,

Sincerely, Tim

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '50px',
            width: '50px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '100px',
            width: '100px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '75px',
            width: '75px'
        });
        $("div").animate({
            opacity: '0.5',
            height: '200px',
            width: '200px'
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

Answer №1

Answer №2

Similar questions

What is the method for retrieving the name of the 'Autocomplete' component in Material UI?

The autofocus feature on the textarea in Angular Material Dialog seems to be malfunctioning

Encountering an Unexpected Token Error While Parsing JSON with jQuery

Create a personalized button | CKEditor Angular 2

Prevent the Rain from descending

Establish a table containing rows derived from an object

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

Is it a problem with Cucumber Js callbacks or a feature issue?

Tips for beginning with running vue js examples/demos

Tips for managing the return value of a PHP function in AJAX requests

IE8 - Unable to use rgba()

How can I arrange individual events in agendaWeek view on FullCalendar.io and then merge them all into one line?

What specific files from the Kendo core are required for utilizing Mobile and Angular functionalities?

Is there a way to generate a distinctive curved design using CSS for a

The request to access /test.php has resulted in an error (404) indicating that the file cannot be found

CSS Animation Effect on Transparent PNG Image

Performing an AJAX POST request in Laravel

Tips for Importing HTML Table Data Line by Line into SQL Table

Using jQuery to add a timed slide effect to an element

Looking to invoke a jQuery ajax page method