Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background image zoom in when the button is clicked before redirecting the user. Here is my code snippet:

CSS followed by HTML

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Brush Script MT;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

#showcase h1 {
  font-size: 10px;
  line-height: 1.2;
}

#showcase p {
  font-size: 20px;
}

#showcase .button {
  font-size: 25px;
  text-decoration: none;
  color: #10B589;
  border: #10B589 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

#showcase .button:hover {
  background: #10B589;
  color: #fff;
  animation: wiggle 1s;
  box-sizing: border-box;
}

#section-a {
  padding: 20px;
  background: #10B589;
  color: #fff;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #10B589;
  text-align: center;
}

#section-c {
  display: flex;
}

#section-c div {
  padding: 20px;
}

#section-c .box-1,
#section-c .box-3 {
  background: #10B589;
  color: #fff;
}

#section-c .box-2 {
  background: #f9f9f9;
}

@keyframes wiggle {
  12% { transform: scale(0.4,  0.65); }
  13% { transform: scale(0.43, 0.67); }
  14% { transform: scale(0.5,  0.76); }
  25% { transform: scale(0.8,  1.3);  }
  37% { transform: scale(0.9,  0.95); }
  50% { transform: scale(1.1,  0.8);  }
  62% { transform: scale(0.9,  1);    }
  75% { transform: scale(0.7,  1.2);  }
  87% { transform: scale(0.8,  1.1);  }
}
<html>
<head>
  <header id="showcase">
    <a href="insertname.html" class="button">Enter The Cave</a>
  </header>
  <body>
  </body>
</head>
<link href="ISTwebsite.css" rel="stylesheet" type="text/css">
</html>

I've searched through several resources online but haven't found a solution yet. Can someone please assist me?

javascripthtmlcss

Answer №1

Check out this demonstration featuring an animated background zoom effect with a smooth fade-out transition. I've included the dynamic class background_size. Take note of this line in the JavaScript code: 

document.location.href = "your_link";
Make sure to replace your_link with your actual link.

let button_a = document.querySelector('.button');
let background_picture = document.querySelector('#showcase');

button_a.onclick = function(){
  background_picture.classList.add('background_size');
  button_a.classList.add('smooth_button');
  document.location.href = "your_link";
};
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Brush Script MT;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  transition: 0.5s;
  opacity: 1;
}

.background_size {
  transform: scale(1.5);
  opacity: 0!important;
}

.smooth_button {
  opacity: 0!important;
}

#showcase h1 {
  font-size: 10px;
  line-height: 1.2;
}

#showcase p {
  font-size: 20px;
}

#showcase .button {
  font-size: 25px;
  text-decoration: none;
  color: #10B589;
  border: #10B589 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
  transition: 0.1s;
  opacity: 1;
}

#showcase .button:hover {
  background: #10B589;
  color: #fff;
  animation: wiggle 1s;
  box-sizing: border-box;
}

#section-a {
  padding: 20px;
  background: #10B589;
  color: #fff;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #10B589;
  text-align: center;
}

#section-c {
  display: flex;
}

#section-c div {
  padding: 20px;
}

#section-c .box-1,
#section-c .box-3 {
  background: #10B589;
  color: #fff;
}

#section-c .box-2 {
  background: #f9f9f9;
}

@keyframes wiggle {
  12% { transform: scale(0.4,  0.65); }
  13% { transform: scale(0.43, 0.67); }
  14% { transform: scale(0.5,  0.76); }
  25% { transform: scale(0.8,  1.3);  }
  37% { transform: scale(0.9,  0.95); }
  50% { transform: scale(1.1,  0.8);  }
  62% { transform: scale(0.9,  1);    }
  75% { transform: scale(0.7,  1.2);  }
  87% { transform: scale(0.8,  1.1);  }
}
<html>
<head>
  <header id="showcase">
    <a class="button">Enter The Cave</a>
  </header>
  <body>
  </body>
</head>
<link href="ISTwebsite.css" rel="stylesheet" type="text/css">
</html>

Answer №2

You can set the href attribute of the anchor tag (a) after a short delay following the click event and background zoom effect, like shown in my code snippet below:

btn.onclick = () => {
  showcase.style.transition = "1.5s";
  showcase.style.transform = "scale(1.3)";
  setTimeout(() => {
    window.location.assign("insertname.html");
  }, 1000);
}
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Brush Script MT;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

#showcase h1 {
  font-size: 10px;
  line-height: 1.2;
}

#showcase p {
  font-size: 20px;
}

#showcase .button {
  font-size: 25px;
  text-decoration: none;
  color: #10B589;
  border: #10B589 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

#showcase .button:hover {
  background: #10B589;
  color: #fff;
  animation: wiggle 1s;
  box-sizing: border-box;
}

#section-a {
  padding: 20px;
  background: #10B589;
  color: #fff;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #10B589;
  text-align: center;
}

#section-c {
  display: flex;
}

#section-c div {
  padding: 20px;
}

#section-c .box-1,
#section-c .box-3 {
  background: #10B589;
  color: #fff;
}

#section-c .box-2 {
  background: #f9f9f9;
}

@keyframes wiggle {
  12% {
    transform: scale(0.4, 0.65);
  }
  13% {
    transform: scale(0.43, 0.67);
  }
  14% {
    transform: scale(0.5, 0.76);
  }
  25% {
    transform: scale(0.8, 1.3);
  }
  37% {
    transform: scale(0.9, 0.95);
  }
  50% {
    transform: scale(1.1, 0.8);
  }
  62% {
    transform: scale(0.9, 1);
  }
  75% {
    transform: scale(0.7, 1.2);
  }
  87% {
    transform: scale(0.8, 1.1);
  }
}
<header id="showcase">
  <a class="button" id="btn">Enter The Cave</a>
</header>

Answer №3

Initially, I made adjustments to your animation CSS...

@keyframes bounce {
  0% { transform: scale(1.3,  1.3); }
  20% { transform: scale(1.5, 1.5); }
  40% { transform: scale(1.7, 1.7); }
  60% { transform: scale(1.9, 1.9); }
  80% { transform: scale(2.1, 2.1); }
  100% { transform: scale(2.3,2.3); }
}

Subsequently, I included JS in the onclick event of your button...

<a href="newpage.html" class="button" onclick="event.preventDefault(); container.style.animation='bounce 4s linear 0s infinite normal none'; setTimeout(function(){document.location=this.href;},3000);">Explore The Forest</a>

Within the onclick function, you will see...

  1. event.preventDefault(); // Prevent the anchor tag from redirecting

  2. container.style.animation='bounce 4s linear 0s infinite normal none'; // Apply the animation CSS to the designated element

  3. setTimeout(function(){document.location=this.href;},3000); // Redirect to the specified URL after a 3-second delay

Answer №4

One technique to consider is adding a child element and implementing a script to enlarge it slightly, creating a zoom effect before transitioning to another page.

CSS (ISTwebsite.css):

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Brush Script MT;
  font-size: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  height: 100vh;
  width: 100%;
}

.inner-showcase {
  background-image: url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.inner-showcase h1 {
  font-size: 10px;
  line-height: 1.2;
}

.inner-showcase p {
  font-size: 20px;
}

.inner-showcase .button {
  font-size: 25px;
  text-decoration: none;
  color: #10B589;
  border: #10B589 1px solid;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.inner-showcase .button:hover {
  background: #10B589;
  color: #fff;
  animation: wiggle 1s;
  box-sizing: border-box;
}

#section-a {
  padding: 20px;
  background: #10B589;
  color: #fff;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #10B589;
  text-align: center;
}

#section-c {
  display: flex;
}

#section-c div {
  padding: 20px;
}

#section-c .box-1,
#section-c .box-3 {
  background: #10B589;
  color: #fff;
}

#section-c .box-2 {
  background: #f9f9f9;
}

@keyframes wiggle {
  12% {
    transform: scale(0.4, 0.65);
  }

  13% {
    transform: scale(0.43, 0.67);
  }

  14% {
    transform: scale(0.5, 0.76);
  }

  25% {
    transform: scale(0.8, 1.3);
  }

  37% {
    transform: scale(0.9, 0.95);
  }

  50% {
    transform: scale(1.1, 0.8);
  }

  62% {
    transform: scale(0.9, 1);
  }

  75% {
    transform: scale(0.7, 1.2);
  }

  87% {
    transform: scale(0.8, 1.1);
  }
}

HTML:

<html>
  <head>
    <link href="ISTwebsite.css" rel="stylesheet" type="text/css">
  </head>
  <body>

    <header id="showcase">
      <div class="inner-showcase">
        <a href="insertname.html" class="button myLink">Enter The Cave</a>
      </div>
    </header>

    <script>
      document.querySelector('.myLink').addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector('.inner-showcase').style = 'transform: scale(1.2)';
        setTimeout(() => location.href = this.href, 1000);
      });
    </script>

  </body>
</html>

NOTE: Remember to place your <header /> element within the <body /> tag and not in the <head /> section.

Answer №5

I also included my small Library there. Make sure to check under 

// library above - magic under here
:

//<![CDATA[
/* js/external.js */
let get, post, doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, shuffle, rand; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, responseType = 'json', context = null)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url); x.responseType = responseType;
  x.onload = ()=>{
    if(success)success.call(c, x.response);
  }
  x.send();
  return x;
}
post = function(url, send, success, responseType ='json', context = null){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url); x.responseType = responseType;
  x.onload = ()=>{
    if(success)success.call(c, x.response);
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(send instanceof FormData){
      x.send(send);
    }
    else{
      const fd = new FormData;
      let s;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' && s)s = JSON.stringify(s);
        fd.append(k, s);
      }
      x.send(fd);
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
hC = function(node, className){
  return node.classList.contains(className);
}
aC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
shuffle = array=>{
  let a = array.slice(), i = a.length, n, h;
  while(i){
    n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
  }
  return a;
}
rand = (min, max)=>{
  let mn = min, mx = max;
  if(mx === undefined){
    mx = mn; mn = 0;
  }
  return mn+Math.floor(Math.random()*(mx-mn+1));
}
// library above - magic under here
const stage = I('stage'), enter = I('enter');
enter.onclick = function(){
  aC(this, 'dis'); aC(stage, 'cave');
  setTimeout(()=>{
    location = 'insertname.html';
  }, 520);
}
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden;
}
body,html,.main,#stage{
  width:100vw; height:100vh;
}
.hid{
  display:none;
}
.dis{
  opacity:0; transition:opacity 0.1s;
}
#stage{
  display:flex; background:center / cover url('https://image.freepik.com/free-vector/cartoon-cave-with-stalactites_29190-1074.jpg'); align-items:center; justify-content:center;
}
#stage.cave{
  transform:scale(5); transition:transform 0.5s;
}
#enter{
  background:transparent; color: #10B589; font:25px 'Brush Script MT', cursive; padding:15px 25px; border:#10B589 1px solid; border-radius:10px; margin-top:20px; cursor:pointer;
}
#enter:hover{
  background:#10B589; color:#fff; animation:wiggle 1s;
}
@keyframes wiggle {
  12% { transform: scale(0.4,  0.65); }
  13% { transform: scale(0.43, 0.67); }
  14% { transform: scale(0.5,  0.76); }
  25% { transform: scale(0.8,  1.3); }
  37% { transform: scale(0.9,  0.95); }
  50% { transform: scale(1.1,  0.8); }
  62% { transform: scale(0.9,  1); }
  75% { transform: scale(0.7,  1.2); }
  87% { transform: scale(0.8,  1.1); }

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='stage'>
      <input id='enter' type='button' value='Enter the Cave' />
    </div>
  </div>
</body>
</html>

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

Exploring the depths of nested object arrays and navigating through historical indexes

I am working with nested object arrays within an array and looking to determine the path of a specific key. For instance: const dataList = [ [ [{id: 100,name: 'Test1'}, {id: 120,'Test12'}], [{id: 101,name: 'Test1&apo ...

javascript

XHR object encountered a 404 error while attempting a GET request with an unknown URI component name

Currently, I am attempting to design a text box that triggers a server query as soon as a character is entered into it. However, I am encountering an error message that is puzzling me: Traceback (most recent call last): File "/Users/sahandzarrinkoub/Do ...

javascriptpythonajaxdjango

The functionality to show the login status is currently malfunctioning

I have a login status indicator section on my homepage which is connected to an ajax-php database. The login button performs two actions when clicked. <input value="Login" type="button" onclick='logInUser(/*function to handle login request*/);upda ...

phpjavascriptjqueryajax

When accessing req.param on the server side in a Node.js application, it returns undefined

I am currently utilizing nodejs and angularjs for my project. In the client-side javascript file, I made a GET request to the nodejs server with necessary data in parameters. itinerary.js $http({ method : "GET", url : '/createItinerary&apo ...

javascriptangularjsnode.jsexpress

Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...

javascriptangularjsag-grid

Creating a material texture with file api in three.js is a straightforward process

I have a vision to create a cutting-edge model browser that allows users to handpick models and textures themselves. In order to achieve this, I am utilizing the File API for smooth file handling. My approach involves using two separate file inputs for rec ...

javascriptthree.js

Prevent the footer from overlapping with the text when printing several pages

Is there a way to prevent text from overlapping the footer when printing a page containing both? I have tried using CSS and HTML to adjust the positioning of the footer, but it still overlaps with long blocks of text. Any suggestions on how to fix this i ...

htmlcssbootstrap-5

How to update the state of a component in the root layout from its child components in Next JS 13 with the app router?

I am in the process of upgrading a Next JS app project to utilize the App Router. Within the layout.js (the root layout), there is a Logo component that will be visible on all routes. Within the RootLayout, I am managing a state variable to modify the ap ...

javascriptreactjsnext.js

When using the npm command, errors may occur that are directly related to the lifecycle and initialization

Currently, I am delving into the world of OpenLayers and JavaScript. I came across a helpful tutorial that provides step-by-step guidance on creating a simple OpenLayers project using JavaScript. I followed the instructions diligently but encountered an er ...

javascriptnpmopenlayersnpm-installnpm-start

What methods are available for parsing JSON data into an array using JavaScript?

I possess an item. [Object { id=8, question="وصلت المنافذ الجمركية في...طنة حتّى عام 1970م إلى ", choice1="20 منفذًا", more...}, Object { id=22, question="تأسست مطبعة مزون التي تع... الأ ...

javascriptjqueryarraysjson

In Safari, there seems to be an issue where multiple URLs are not opening when clicked on from an anchor

Is there a way to open multiple URLs in Safari with just one click using window.open? I tried it, but only one URL opens in a new tab while the others do not. The version of Safari I am using is 11.0.1. onclick="window.open('URL1','_blank& ...

javascriptjqueryhtmlsafari

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

javascriptjqueryhtml

What is a more efficient method for identifying a single, specific object without using the index approach demonstrated here?

I need to verify if the taskDetails object contains only the lastTask value and no other values. To achieve this, I am currently using the approach with index [0] as shown below: Object.keys(this.clubdetails.taskDetails)[0]==["lastTask"] However, I have ...

javascriptvue.jsobjectfrontend

A guide to successfully sending the 'onClick' function to a child component within React

In my coding project, I have developed a versatile Modal component that can be customized with different headers, bodies, and footers, as well as various arguments for the Reactstrap components. While I am using Reactstrap to create the Modal, the issue is ...

javascriptreactjs

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

What is the best way to display a div based on a keyword match?

If the keyword search results in a match, I can display the corresponding input text and its related category div. Now, I am attempting to also search through category names. If the searched keyword matches a category name, that specific div should be visi ...

javascripthtmljquery

What is the best way to cut out a portion of a div using CSS?

I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However ...

csshtml

In Python using Selenium, the text property of a WebElement may cut off duplicate whitespaces

Today, I came across an interesting observation regarding the text property of WebElement. Here is a PDF link that sparked my curiosity: https://i.stack.imgur.com/1cbPj.png Upon closer inspection, I noticed that the file name contains triple whitespace. W ...

pythonhtmlseleniumdomselenium-webdriver

Can we generate a JSON format that resembles the following structure?

Currently, I am in the process of transferring data from one system to another. The developer at the remote system has provided me with an example of a JSON structure that should be included in the body of the REST call. The structure is outlined below: ...

javascriptjson

Creating a dynamic image display feature using VueJS

Explore the connections between the elements How can I transmit a value from one child component to another in VueJS? The code snippet below is not generating any errors and the image is not being displayed <img v-bind:src="image_url" /> Code: & ...

javascriptvue.jsvuejs2vue-componentdynamic-image-generation