Scroll to Reveal Content Hidden Behind Hero Image

Question

Scroll to Reveal Content Hidden Behind Hero Image

I am absolutely enamored with the Beautiful Stories section on Medium's website. The way they showcase their content is just mesmerizing.

One thing I've noticed is how the cover image and preview of the content changes as you resize your browser window. It's like magic!

Curious to know how they achieve this effect, I decided to set up a CodePen with my own page structure to experiment: http://codepen.io/realph/pen/luwdJ

If anyone has any insights on how I can replicate this amazing feature, please share your knowledge. Thank you in advance!

javascript jquery css responsive-design

Answer 1

Answer №1

Give this a try,

new and improved

$(document).ready(function() { 
        var $winwidth = $(window).width();
        $("img.source-image").attr({
            width: $winwidth
        });
        $(window).bind("resize", function(){ 
            var $winwidth = $(window).width();
            var $winheight = $(window).height();
            $("img.source-image").css({
                'width': $winwidth,'height':$winheight
            });
         });
    });

The script above adjusts the image width based on the screen size.

Also, here is the CSS styling

img.source-image {
    position: absolute;
    top: 0;
    left: 0;
}

Or you can use

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

For more information, check out this Link

Answer 2

Give this a try,

new and improved

$(document).ready(function() { 
        var $winwidth = $(window).width();
        $("img.source-image").attr({
            width: $winwidth
        });
        $(window).bind("resize", function(){ 
            var $winwidth = $(window).width();
            var $winheight = $(window).height();
            $("img.source-image").css({
                'width': $winwidth,'height':$winheight
            });
         });
    });

The script above adjusts the image width based on the screen size.

Also, here is the CSS styling

img.source-image {
    position: absolute;
    top: 0;
    left: 0;
}

Or you can use

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

For more information, check out this Link

Scroll to Reveal Content Hidden Behind Hero Image

Answer №1

Similar questions

Creating dynamic elements in JavaScript and assigning them unique IDs

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Seeking an efficient localStorage method for easy table modification (HTML page provided)

How do I set up a 5 column layout for the home page and switch to a 4 column layout for category pages in Magento?

Retrieving Google Maps Geocoding JSON through an Express API

The Vue2 @click event does not function properly when using v-html within a different component

The trigger for the newly loaded AJAX data failed to activate

Transferring an array in JavaScript to a different page without relying on PHP

Transforming dynamic tables into JSON format

Leveraging AJAX for transmitting form information to a php script without relying on jQuery

The age-old debate: Deciding between JavaScript's touchend and

React + Redux triggering excessive re-renders of mapped components when making additional API calls

Accessing a React component by ref before it has been rendered for the first time

Using Javascript to organize an array of objects based on a specific condition

When using Next.js to load a client-side library, the component undergoes multiple re-renderings as the state of the parent component changes

Achieving vertical center alignment for the label and btn-group in Bootstrap

Managing multiple Sequelize DB connections in NestJS: A guide

How can I make col-8 and col-4 display next to each other?

Utilizing an NPM package in your project

The compatibility of IE9 with tables and the use of display: block