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

How to Utilize Output() and EventEmitter() for Value Transmission in Angular Application

Last week I was successfully able to implement Output() and EventEmitter() in my Angular app. However, today I am facing a new challenge while trying to apply the same concept in a different scenario. I'm not sure what I might be overlooking. Firstly ...

javascriptangulareventemitter

Tips for filling jstree with information in Grails

I am currently facing difficulties in populating a jstree within a Grails gsp. Here is what I have attempted so far (rewritten for clarity): <script> $("#treeView").jsTree(); </script> <div id="treeView"> <g:each in="${atomMa ...

javascriptgrailsjstree

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes

An HTML attribute that functions like autofocus in the select tag

Is there a way to set the default focus on a select tag in HTML, similar to how autoFocus works for textboxes? I am looking to make a select tag automatically focused when the page loads. Is there a method to achieve this? ...

html

Leverage the camera functionality in both native and web applications using Ionic/AngularJS and Cordova

Could you provide some guidance on how to use the Camera feature in both web and native environments? I have tried implementing it using the code snippet below, taken from ng-cordova documentation: $scope.takePicture = function() { var options ...

javascriptangularjscordovaionic-framework

achieve precise outcomes using mapping techniques

I am currently learning react.js and encountering an issue with obtaining specific results on the map. Below is the code I am working with: render(){ const friends = [ {id:1, name: 'Dave',age:50}, {id:2,name: 'Kellie',age:42}, {id:3, ...

javascriptreactjs

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

Is there a way to create an event listener that responds to a simultaneous click of both mouse buttons?

Despite my extensive research on the Internet, I was unable to find any examples. Interestingly, Vue only supports right and left clicks separately which I find peculiar as it seems like a basic task that can easily be accomplished with plain Javascript. ...

javascriptvue.js

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

Which is the preferred method: utilizing ajax calls from assets/javascript/*.js or *.js.erb views?

I am developing an admin service on Rails that communicates with a network communicator. Here is my challenge: When a user clicks a button, they are presented with network groups to choose from. Once the user selects a group, they should be able to see th ...

javascriptruby-on-railsajaxjsonerb

The mouse movement event will not be triggered for every frame when a keyboard event occurs

When the mouse is moving in a browser, ideally the mousemove event should fire every frame. However, if a key is pressed or released (or repeated), the mousemove event stops firing for a frame or two. To test this behavior, you can use the code snippet bel ...

javascriptdom-eventsmousemove

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Currently, I am developing an application using Angular Syncfusion to allow users to view and book appointments. I found a helpful resource at the following link: Below you can find the code snippet I have been working on: <ejs-schedule #scheduleObj ...

javascriptangularsyncfusionej2-syncfusion

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

Exploring the realm of web scraping by targeting a UFC betting site for data extraction. JavaScript, alongside request-promise and cheerio packages, is utilized in this endeavor. Site: The primary aim is to retrieve the fighters' names along with th ...

javascripthtmlnode.jsdomweb-scraping

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

I am attempting to create a JavaScript function for an HTML button element. However, I have noticed that it causes the page to reload. Strangely, when I use an input with a button type, everything works perfectly. What could be causing this issue and why a ...

javascriptasp.nethtml

Modify the navbar background color in bootstrap-vuejs

As per the information provided in the documentation, the instructions for setting styles for the navigation bar are as follows: <b-navbar toggleable="lg" type="dark" variant="info"> <!-- Or --> <b-navbar toggleable="lg" type="dark" variant ...

cssvue.jsbootstrap-vue

Issue with JQuery causing maxlength input not to work

Is there a way to use JQuery to set the maxlength attribute for an input[type='text'] while users are typing, so that once the max value is reached, input will stop? This is the code I have been trying: $(document).ready(function(){ $(&apos ...

jqueryhtml

Tips for testing Sequelize with Jasmine

In my database/index.ts file, I set up a Sequelize database using the code below: import { Sequelize } from 'sequelize'; const { DATABASE_DIALECT, DATABASE_HOST, DATABASE_PORT, DATABASE_USER_NAME, DATABASE_USER_PASSWORD, DATABASE_NAM ...

javascriptnode.jspostgresqlunit-testingsequelize.js

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

htmlcsscss-floathtml-lists

Discover the process for breaking down JSON data into separate stages using the Express API

My API architecture is causing a problem as I try to insert it into an array called items[]. https://i.stack.imgur.com/qe802.png The setup involves a simple API built on express + mongodb. The challenge lies in figuring out how to store data from the pos ...

javascriptmongodbexpress