Thu, 2018-01-18 00:05
Hello
I am trying to customise this page:
http://www.dimadayoub.net/mail/flipMail.html
At the bottom of the screen is an envelope which I am happy with, but wish to remove the checkbox entirely without affecting the animated envelope.
I have tried to separate the code that make both appear and work, but they are interlinked.
How would I go about that, please?
This is the code:
body { background-color: #fcfcfc; font: 100%/160% verdana, arial, helvetica, sans-serif; } #cb0 { margin-top: 500px; margin-left:130px; height: 100px; width: 100px; } #cb0:checked + #envelope label { transform: rotateX( -360deg ); } #envelope { width: 3em; height: 3em; margin: 1em; border-radius: 0.25em; background-color: #fff; box-shadow: 0 0 0.25em #c7c7c7; transition: 1s ease-in-out; } #envelope:hover { box-shadow: 0 0 0.25em #626262; } #envelope label { display: block; height: 100%; background-image: url( <a href="http://www.dimadayoub.net/mail/image/mail-icon1.png" rel="nofollow">http://www.dimadayoub.net/mail/image/mail-icon1.png</a> ); transition: 2s ease-in-out; cursor: pointer; } </style> </head> <body> <input id="cb0" type="checkbox"> <div id="envelope"> <label for="cb0"></label> </div>
Many thanks!
Fri, 2018-01-19 00:45
#1
More detail please
What do you want to trigger the animation? Right now, changing the checkbox condition is the trigger. If you break that connection, what then?
Do you want the envelope to spin forever or a number of times or have something else trigger the event.
You tell us what you don't want, but not what you do.
gary
Fri, 2018-01-19 02:09
#2
Thanks, Gary, for your
Thanks, Gary, for your reply.
On this page http://www.dimadayoub.net/frina/Contact.aspx I would want to replace that Send button with the mail icon and possibly place it in a bordered-box.
It would rotate for as long as it took for the form to be sent - normally a second or two. That would involve server-side code, I know.
The checkbox would be useful to denote the form had been sent (and the icon would stop flipping at the same time), and could be placed under the email field in the Web page above. In other words, the behaviour of the mail icon and the check-box are related, but I would need to be able physically separate them in order to position them on the form.
Does it sound a bit elaborate?
Fri, 2018-01-19 22:35
#3
Too tricked up for my taste, but …
I'd go for a gif and start it by an onclick event handler (which I leave to you). On the server side, address the template that handles the form, then on true return a new page which will reset everything.
Not tested beyond straight html
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; background-image: url("/images/bg.jpg") background-size: cover; background-position: center; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } form { background-color: transparent; border: 1px solid black; margin: 0 auto; padding: 1.5em; width: 25em; } label { display: block; margin: 1em 0; } h1 { margin-top: 0; } /*]]>*/ </style> </head> <body> <form action="#" method="get"> <h1> Contact Form </h1> <fieldset> <legend> Contact info </legend> <label for="name"> Name <input type="text" name="name" id="name"> </label> <label for="email"> Email Address <input type="text" name="email" id="email"> </label> <label for="mailtext"> Text <textarea name="mailtext" id="mailtext" cols="40"> </textarea> <label for="send"> Send <button id="send" name="send" type="submit" title="Send email" onclick="[local script.js]"> <!-- or onsubmit --> <img src="[yourmailicon].gif"> </button> </label> </fieldset> </form> </body> </html>
Sun, 2018-01-21 00:28
#4
It looks fine, Gary,
It looks fine, Gary, thanks!
I can see you have put a fair amount of work into it.
Grateful.