Jump to content
Search Community

Force a image to take the banner size

Vicky27 test

By Vicky27
in Banner Animation

Moderator Tag
 Share

Recommended Posts

Vicky27 test

Vicky27

Posted
Posted

Hi everyone and thank you in advance for your support.

I am trying to make the image which is an element of the frame and has double size(320x1200) of the banner  (160x600) to scale in but I don't know how to force it to take the size of the banner. I have tried to give it background-size:100% in the style.css to the class of the element but it is still doesn't work.

 

<style>

</styles

body, h1, h2, h3, p {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: #fff;
  }
 
.container
{
    width:160px;
    height: 600px;
    overflow: hidden;
    background-color: #000;
 
}
#photo1
{
width:160px;
height:600px;
background-size:200%;
background-image: url('/images/f1.jpg');
 
}

>

 

 

<script>

gsap.timeline()
.from(".photo1",{opacity:1, ease:"back"})
.from("#logo", {opacity:0, duration:1, scale:0, ease:"back"})

</script>

 

<html>

  <div class="container">
     
       
            <div id="line1"><img src="images/blue_line.png"></div>
            <div id="line2"><img src="images/green_line.png"></div>
            <div id="photo1"><img src="images/f1.jpg"></div>
            <div id="logo"><img src="images/logo.png"></div>
            <div id="h1"><img src="images/text1.png"></div>
 
 
        </div>
</html>

 

Could someone please help me with any suggestion, ideea?What I am doing wrong?

Thank you again.

Link to comment
Share on other sites
Cassie test

Cassie

Posted
Posted

Hi Vicki!

 

I'm not entirely sure what you're after here as you've put the background size on the photo but the only scale animation in your code is on the logo.

I'm guessing you want the 'photo' image to start off twice the size and then scale down to size of the banner?

If so, then set your banner image to the correct size in the css and then you can tell GSAP to animate it from a scale of twice it's size. scale: 2

  

bannerContainingElem {
  position: relative /* position absolute needs a relative containing element in orger to work */
}

#photo1 {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background-size:cover;
  background-image: url('/images/f1.jpg');
}

 

from("#photo1", {duration:1, scale:2})

Link to comment
Share on other sites
Vicky27 test

Vicky27

Posted
  • Author
Posted

Hi Cassie,

Thank you very much for your reply.

As the original size of the "photo1" is (320x1200)px which has double size compare with the original banner which is 160x600 I need to make, force it to be the banner size initially. How would I set up it to get the image as per banner size?

 

 

Link to comment
Share on other sites
Vicky27 test

Vicky27

Posted
  • Author
Posted

Hi, Sorry for my bad explanation,

I have created a code open pen now to reproduce my case.

See the Pen VwBaxeV by vicutza_27 (@vicutza_27) on CodePen

.

I have put just a image which has bigger size and it is stretching while what I want is to make the image just the size of the banner and keeping quality.

I am just wondering is it possible to achive that with gsap, js,css or I have to make it in exactly the same size in a photo editor as the banner 160x600?

 

Thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...