uhello Posted April 5, 2016 Share Posted April 5, 2016 Hi, I am using HTML5. I have a <p> that is 800x600 with a solid background color. On the right edge, I would like to place a small animation of a person peeking out from behind it to the right. Is there an example code snippet I can look at? This would be Canvas, right? Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2016 Share Posted April 5, 2016 If the animation is a GIF file you can just use absolute positioning for it. You probably should use a <div> instead of <p> and then have <p> elements inside just for text. HTML <div class="peeking"> <p>Content here</div> <img class="corner" src="animation.gif"> </div> CSS .peeking { background-color: #EAEAEA; width: 800px; height: 800px; position: relative; /* This is important */ } .peeking img { position: absolute; top: 0; width: 80px; height: auto; right: -80px; } If the animation is not a GIF, we need to know exactly how you plan to make the animation. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 7, 2016 Share Posted April 7, 2016 It could be done with Canvas, yes, but that's much more complicated than Ingolme's suggestion (using a GIF) and wouldn't work in instances where the user has JavaScript disabled since canvas requires JavaScript to function. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2016 Share Posted May 25, 2016 The example has mixed opening p and closing div. You can just use float: right; with margin-right: -80px; without positioning. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now