Is it possible to create a dynamic header or image that expands and zooms

Have you noticed the iOS-style header images in some apps where you pull to zoom and it feels like an elastic image?

I want to replicate this effect using jquery, possibly with some CSS as well.

This effect has been achieved using angularjs, but since I'm not familiar with angularjs, I'm looking for a simple jquery example instead.

Here is an example using angularjs: https://codepen.io/olach/pen/NqrYQL

If you pull the image and release it, you can see the effect in action.

I came across other projects that involve cordova and gulp, but I don't know what gulp is, so I can't use those examples either.

Any guidance or pointers would be greatly appreciated.

javascriptjquerycss

Answer №1

I have compiled this information for you. Please refer to this interactive example on JSFiddle:

https://jsfiddle.net/RCD_Y/sj9xuk1p/16/

Alternatively, you can explore the code snippet below (works best on the JSFiddle platform):

Considered JavaScript code is provided above with functionality focused on drag and scroll actions. Feel free to test it out in the specified environment.
The CSS styling sets up the layout and design elements required for the demo's visual representation.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<div class="parent">
  <div class="img-container">
    <img src="https://az616578.vo.msecnd.net/files/responsive/cover/main/desktop/2016/11/03/636137866789556986-167666954_city-skyline-drawing-wallpaper-2.jpg" draggable="false" />
  </div>
  <div id="info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas convallis enim quis pharetra... [Truncated for brevity]
    <br />
    <br /> Morbi elementum nec lorem nec blandit. Donec varius nulla eu nibh aliquet... [Continued sample text]
  </div>
</div>

Feel free to interact with the content using your mouse or touchscreen to experience its features.

Answer №2

First and foremost, I highly doubt that anyone here on SO would be willing to write out an entire code for you.

Nevertheless, I can definitely point you in the right direction.

I once created something very similar to what you're looking to achieve. My solution involved utilizing: https://github.com/peachananr/fancy-scroll

This specific github project closely matches your requirements.

It functions just like iOS browsers do. All you need to do is customize it to fit your needs perfectly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize PrimeNG component styles

Utilizing the PrimeNG OverlayPanel for a dropdown click feature, I am encountering an issue with moving the default left arrow to the right position. Despite trying various solutions, I have reached a dead end. Would you be able to provide me with some fr ...

htmlcssangularprimeng

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

When attempting to embed a bootstrap toggle checkbox within <ng-view></ng-view>, an issue arises where a regular HTML checkbox is displayed instead of the expected bootstrap toggle. Strangely, the same checkbox functions as a bootstrap toggle w ...

javascripthtmlcssangularjstwitter-bootstrap

How can you disable a single button when clicked using the map method, and update the className after a timer runs out in React?

Is there a way to disable only one button when clicked using the map method? I currently have a disabled hook that affects all pressed buttons. Also, how can I revert the 'current__events__hot-price disabled' className back to 'current__even ...

javascriptreactjsbuttonreact-hookscolors

Having trouble identifying whether a file is a picture or video based solely on its extension

My current challenge involves determining whether an uploaded file is a video or a photo. This distinction is crucial as it dictates whether the file should be sent to my telegram bot as a video or photo attachment. Despite having what seems like a logica ...

javascriptnode.jsexpressformidable

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

javascriptphphtmlajax

Is it possible that scrollIntoView() function is not available when the page is first loaded?

Within my FAQ page, I have concealed the answers to each question by default, displaying only the questions with a link that allows others to reference each specific question through an embedded id anchor. Here is the structure of the question format: &l ...

javascriptjquery

Personalizing an ng-bootstrap modal by using a component as its content

Struggling to modify a modal using a component as content, but unable to get it working. The only thing showing is the backdrop, with the modal nowhere to be seen. Take a look at this modified stackblitz code for more insight. Essentially, I'm aiming ...

cssangularbootstrap-4ng-bootstrap

Adjust the text placement following its entry on the screen

I'm currently facing an issue with my code that involves text sliding in and then moving to the left after the slide completes. How can I ensure that the text remains in place once the slide is finished? <style> div.slide-left { width: ...

htmlcsscss-animations

Sending an array of elements alongside other data using AJAX

I have a JavaScript function that is working fine, but for some reason my PHP controller is not receiving the array values. Can anyone help me figure out why this might be happening? Thanks in advance :) function submitForm(){ var id = $('#id&apo ...

javascriptphparraysajaxcodeigniter

Leveraging geoPosition.js in conjunction with colobox

How can I create a colorbox link that prompts the user for permission to access their location, and if granted, displays a map with directions from their current location? I've managed to get it partially working, but there's an issue when the us ...

javascriptjquerygeolocationcolorbox

Javascript's most frequent appearance

My knowledge of JavaScript is quite limited and basic. Essentially, I am trying to create a pop-up that displays the answer based on the values entered. The issue I'm encountering with the code below is that when I input an array like 1,2,3,2, the out ...

javascripthtmlsyntax-errormode

Using the Node http module to access the request body while intercepting the http.request function

I am in the process of developing an internal logging system that captures Node's http module by replacing the request method. This is my current implementation: const http = require('http'); const oldHttpRequest = http.request; http.req ...

javascriptnode.jshttp

Listening for events on a canvas positioned beneath another element

I am currently dealing with an issue where I have a mouse move event listener set up on my canvas element. However, there is a div placed on top of the canvas with a higher z-index, which contains some menu buttons. The problem arises when I want the mous ...

javascripthtmlcanvas

What is the best way to transfer an integer from my main application to a separate JavaScript file?

Currently, I am developing a complex code using React Bootstrap and focusing on creating a Dropdown list that fetches data from the backend database. <Dropdown> <Dropdown.Toggle variant="success" id="dropdown-basic"></D ...

javascriptarraysreactjsundefinedreact-bootstrap

Guide to positioning an item at the bottom of the screen using Material UI

Can anyone help me align a button to the bottom of the screen so that it remains in place even when scrolling through a list? I've tried adjusting the code but can't seem to get it right. This is how my current screen appears, with the button al ...

htmlcssreactjsmaterial-ui

What is the process of using the split() method to extract specific text from a string in JavaScript?

Working with AngularJS and facing a requirement to extract a specific text from a scope value. Here's my scope value: $scope.myLogMsg = '1111 order is placed by Sukumar Ms(User)'; //output: by Sukumar Ms(User) Desired output: by Sukumar Ms ...

javascriptangularjs

How can I trigger an API call 30 seconds after my React Native app switches to the background?

Seeking assistance with my React Native app: I am trying to make an API call 30 seconds after the app goes into the background. I am using AppState from react-native to detect when the app goes into the background, but I'm not receiving any callback a ...

javascriptreact-native

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

Learn how to update a form dynamically using the Ajax.BeginForm feature

I am currently working on updating a form within my application using Ajax.BeginForm. The update process is functioning correctly, however, upon executing the function in the controller, it redirects to a view with the controller function name displayed. ...

javascriptjqueryajaxasp.net-mvcrazor