Reveal the hidden div by sliding it up from the bottom

Question

Reveal the hidden div by sliding it up from the bottom

I have a container with brown branches resembling the image, and I'm looking to hide it. When a button is clicked, I want it to reveal from the bottom to the top, almost like it's being unmasked. I've ruled out a typical bottom-up slide animation due to the presence of leaves at the top, so I'm exploring the idea of unveiling it with a mask effect.

Here's my current setup:

$('.button').click(function () {
        $('#branchmain').show('slide', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

Is there a way to apply a mask effect to the container and reveal it from bottom to top without actually moving it? I'm looking for a solution to achieve this effect.

https://i.sstatic.net/a140q.png

javascript jquery css

Answer 1

Answer №1

If you want a smooth effect, try using the 'blind' animation instead of 'slide'.

To display the tree in front of another image, consider using layered divs.

$('.button').click(function () {
        $('#branchmain').show('blind', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

Answer 2

If you want a smooth effect, try using the 'blind' animation instead of 'slide'.

To display the tree in front of another image, consider using layered divs.

$('.button').click(function () {
        $('#branchmain').show('blind', {direction: 'down'}, 1000);
  });

#branchmain {
    background-image: url(http://i.imgur.com/IV2C28A.png);
    background-repeat: no-repeat;
    display:none;
    width: 114px;
    height: 307px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="button">Click me!</div>
<div id="branchmain"></div>

Answer 3

Answer №2

Utilizing a unique combination of SVG clipping mask and CSS animation, I have successfully created an animation that showcases a fade up effect. It's worth noting that I have set the CSS animation to run indefinitely and made some adjustments specifically for this demonstration. You may want to customize these settings to better suit your needs. However, as a proof of concept, I believe it works exceptionally well:

Snippet of HTML:

<body>
  <img class="clipped" src="http://i.imgur.com/IV2C28A.png" />  
  <svg width="100px" height="400px">
    <defs>
      <clipPath id="clipping">
        <rect width="100" height="300"/>
      </clipPath>
    </defs>
  </svg>
</body>

Snippet of JS:

  img {
    position: absolute;
    top: inherit;
    left: 0;
  }
  img.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  }
  div {
    position: absolute;
    left: 410px;
    width: 400px;
    height: 200px;
  }
  div.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  /*  opacity: 0;*/
  }
  svg rect {
    animation: move-mask infinite running 4s;
  }
  @keyframes move-mask {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(600px)}
  }

Check out the Demo on Codepen:

http://codepen.io/mrwigster/pen/eJNBBK

Answer 4

Utilizing a unique combination of SVG clipping mask and CSS animation, I have successfully created an animation that showcases a fade up effect. It's worth noting that I have set the CSS animation to run indefinitely and made some adjustments specifically for this demonstration. You may want to customize these settings to better suit your needs. However, as a proof of concept, I believe it works exceptionally well:

Snippet of HTML:

<body>
  <img class="clipped" src="http://i.imgur.com/IV2C28A.png" />  
  <svg width="100px" height="400px">
    <defs>
      <clipPath id="clipping">
        <rect width="100" height="300"/>
      </clipPath>
    </defs>
  </svg>
</body>

Snippet of JS:

  img {
    position: absolute;
    top: inherit;
    left: 0;
  }
  img.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  }
  div {
    position: absolute;
    left: 410px;
    width: 400px;
    height: 200px;
  }
  div.clipped {
    -webkit-clip-path: url(#clipping);
    z-index: 100;
  /*  opacity: 0;*/
  }
  svg rect {
    animation: move-mask infinite running 4s;
  }
  @keyframes move-mask {
  0%, 100% {transform: translateY(0)}
  50% {transform: translateY(600px)}
  }

Check out the Demo on Codepen:

http://codepen.io/mrwigster/pen/eJNBBK

Answer 5

Answer №3

To create an interesting visual effect, you can overlap one div (which includes a background-image) over another and gradually decrease the max-height of the topmost div:

function shrinkTree() {
var treeWithLeaves = document.getElementsByClassName('tree-with-leaves')[0];
var treeWithoutLeaves = document.getElementsByClassName('tree-without-leaves')[0];
var treeWithLeavesHeight = treeWithoutLeaves.clientHeight;
treeWithLeaves.style.maxHeight = treeWithLeavesHeight + 'px';

var i = 0;

setInterval(function(){
treeWithLeaves.style.maxHeight = (treeWithLeavesHeight - i) + 'px';
i++;
},20);
}

document.getElementsByTagName('button')[0].addEventListener('click',shrinkTree,false);

body {
margin: 25px 0 0 50px;
}

.tree-with-leaves, .tree-without-leaves {
width: 125px;
height: 236px;
}

.tree-with-leaves {
background-image: url('https://i.sstatic.net/a140q.png');
}

.tree-without-leaves  {
background-image: url('http://i.imgur.com/IV2C28A.png');
background-color: rgb(255,255,255);
overflow: hidden;
}

button {
display: block;
margin: 25px;
}

<div class="tree-without-leaves">
<div class="tree-with-leaves">
</div>
</div>

<button>Click Me</button>

Answer 6

To create an interesting visual effect, you can overlap one div (which includes a background-image) over another and gradually decrease the max-height of the topmost div:

function shrinkTree() {
var treeWithLeaves = document.getElementsByClassName('tree-with-leaves')[0];
var treeWithoutLeaves = document.getElementsByClassName('tree-without-leaves')[0];
var treeWithLeavesHeight = treeWithoutLeaves.clientHeight;
treeWithLeaves.style.maxHeight = treeWithLeavesHeight + 'px';

var i = 0;

setInterval(function(){
treeWithLeaves.style.maxHeight = (treeWithLeavesHeight - i) + 'px';
i++;
},20);
}

document.getElementsByTagName('button')[0].addEventListener('click',shrinkTree,false);

body {
margin: 25px 0 0 50px;
}

.tree-with-leaves, .tree-without-leaves {
width: 125px;
height: 236px;
}

.tree-with-leaves {
background-image: url('https://i.sstatic.net/a140q.png');
}

.tree-without-leaves  {
background-image: url('http://i.imgur.com/IV2C28A.png');
background-color: rgb(255,255,255);
overflow: hidden;
}

button {
display: block;
margin: 25px;
}

<div class="tree-without-leaves">
<div class="tree-with-leaves">
</div>
</div>

<button>Click Me</button>

Reveal the hidden div by sliding it up from the bottom

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my Puppeteer scraper to malfunction when I alter the search term?

Sanitize input data prior to using express-validator in a Node.js application

What is the best way to implement my custom toolbar button to utilize the form's validation function within react-admin?

Sending a file through an Ajax POST request to a PHP server

Challenges with optimization in AngularJS and Angular Material

Spread the picture on social media using Progressive Web App

Toggle the visibility of a specific div based on the selection of the "other" radio button or checkbox

Use the Arrow Keys to guide your way through the Page

Incorporating a Bootstrap form within a form group

React.js Component Composition Problem

The functionality of both P and H1 tags seems to be malfunctioning

How come I can't see this on my display?

Issues with uploading files in NodeJs using express-fileupload are causing errors

What steps should I take in order to ensure that NPM commands run smoothly within Eclipse?

The elements of the second flex item should also be arranged in a line next to each other

Use a text link to upload a file instead of using an input field

Using logical equality operators in Javascript

Steps to transfer text from one input field to another by clicking a button using JavaScript

D3 - Rounded edge chart width

Retrieve a subsection of an object array based on a specified condition