Href element in a morphing text

[paulau]
10 years ago

0

i want to know if that’s possible to put a Href element into a morhping txt

Cyan Wind [freewind1012]
10 years ago

0

I don’t get what you mean. :/

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

[deleted user]
10 years ago

0

Ya me neither. What exactly do you mean by Morphing text. It’s like an animation or something (like a gif image) perhaps.

Pawda [Memoria]
10 years ago

0

Me neither, what are you calling “morphing text” ?

[deleted user]
10 years ago | edited 10 years ago

0

@paulau Are you talking about this.

Reply has been removed

[paulau]
10 years ago

0

Nop , i talk about morphing text in html

Cyan Wind [freewind1012]
10 years ago

0

Morphing text in HTML…? I don’t get you. Would you mind using another word or showing us an example? :/

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

[IAmDevil]
10 years ago

0

Morph means changing/altering? Lol I too don’t get it! A little bit more explanation would help you get your answer @paulau .

- @IAmDevil
Its good to be back! :D

Max Lockhart [MaxLockhart]
10 years ago

1

Okay I’m not sure if you’re new to any of this or not? Correct me if I’m wrong please, but I am assuming you are.

First off there is no such tag or what not, called morph. I am thinking the same as @IAmDevil and @tlotr were talking when they mentioned a morph effect. Just by making a guess I believe you are constructing a web page for some purpose in which you desire this effect. In this web page you are using a language called HTML, Hypertext Markup Language and CSS, Cascading Style Sheet. You are more than likely creating a hyperlink to somewhere that when HOVER over it, it makes a neat looking “morphing” effect. Using CSS there are a couple of things you’d could do by messing around with the opacity, text shadow, coloring, size, position, etc and using key frames transitioning into these effects of your liking. Key frames is used for animations in CSS, look it up on w3schools if you’d like to. All you really have to do is set an id (#), if you’re applying this to multiple areas of text then use a class (.), and then call that id in the href tag. Or using a style attribute you could just do all of the CSS in there. I would not recommend that for this type of effect. I’ll explain more since I’m kind of half fasting this post, getting a hair cut right now and using mobile.

By any means if I am wrong, correct me and explain a bit better. If you are a beginner and need some help getting this done I guarantee some of the members on here and myself are more than willing to help and teach you a few things. We will greatly encourage to use the internet to learn things and research but will also help you as well.

Well I’ll be on in a few hours, ttfn

DaPompo
10 years ago | edited 10 years ago

0

is that what you talking about?!
“Mootools element.morph() example”
https://thedotproduct.org/mootools-element-morph-example/

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

0

@DaPompo: Please don’t randomly google something. morph(), in your case, is a built-in function of a JavaScript framework called MooTools.

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

Reply has been removed

Max Lockhart [MaxLockhart]
10 years ago

0

Okay, I thought today was going to be a busy day but luckily for you I found some time to crack this out. Maybe this will help some and maybe not but just tinker around with it to get what fits you best. This code a simple example of how you can emulate some “morphing” text although I just ran out of time to fade back. It has a tiny bit of JavaScript in there as well. So just mess around with the code and figure what fits you. Feel there could have been a much simpler way to go about doing, please correct my code if anyone sees a better way to go about this effect and maybe fix the “morph” out for this guy as well? Hard to do on such a time crunch. I’m in a nice mood today so I hope it helps some :) . Anywho, gotta go and won’t be on this site more than likely for a couple of days whatsoever for reasons. Tffn!

<html>  
<head>  
<style type='text/css'>  
a:hover:before {  
    animation:morph 1s;  
    -webkit-animation:morph 1s;  
    content: 'https://www.hackthis.co.uk/';  
}  

#switch {  
    animation:morph 1s;  
    -webkit-animation:morph 1s;   
}  

@keyframes morph {  
    from {  
        opacity: 0;  
        color:#ffffff;  
        text-shadow: 0px 0px 10px #000000  
    }  
    to {  
        opacity: 1.0;  
        color:#000000;  
        text-shadow: 0px 0px 0px #ffffff;  
    }  
}  
@-webkit-keyframes morph {  
    from {  
        opacity: 0;  
        color:#ffffff;  
        text-shadow: 0px 0px 10px #000000;  
    }  
    to {  
        opacity: 1.0;  
        color:#000000;  
        text-shadow: 0px 0px 0px #ffffff;  
    }  
}  


</style>  
</head>  
<body>  
<a onmouseover='this.innerHTML="<a></a>"' onmouseout='this.innerHTML="Hover over me to Morph into a link"' href='https://www.hackthis.co.uk/' style='text-decoration:none;color:#000000;animation:morph 1s;-webkit-animation:morph 1s;'>Hover over me to Morph into a link</a>  
</body>  

</html>

Reply has been removed

[paulau]
10 years ago

0

Here the code
http://pastebin.com/R2RfFGg7

That’s what i called morphing text

[deleted user]
10 years ago

0

@paulau : That is awesome. Never seen anything like it before except in flash but there is no flash used in this. It’s awesome. Will fiddle with the code a bit and see if I can do something with it. Thanks for sharing @paulau

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

0

@paulau: So you got the code. What was the point of asking us again? You wanted to put href attribute in it, or tag / element? :/

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

[paulau]
10 years ago

0

yes but it’s not mine and i want to show to you what i called “morphing element” to find somebody who can explain me

?ouo? ?????? [rekcah.ronoh]
10 years ago

0

paulau U can call it an INDEX to penetrate……The owner of this index named: Th@WizArd! Right? :) :) ;)
==) This is a pic. from this index

About the href. yeah sure u can put it. ex: <a href="URL"> and there is a lot of codes that can facilitate it.

a little Advice: Also U can put some codes to: Disable Right mouse click OR to disable all keyboard buttons OR to add a script to scroll an image…. To provide the index with some protection. In order not to steal your ideas, but unfortunately all the indexs are adjustable

If U want some codes Just let me know. I have it all. ;)

[paulau]
10 years ago

0

i’ve try to change the text message , we can do it but , i cant put a href element on a text which is “morphing”

?ouo? ?????? [rekcah.ronoh]
10 years ago

0

paulau Do You Mean, U would to put an URL in this text? Or what you mean with href my friend…..

[paulau]
10 years ago

0

yes i want to put clickable href element on the morphing text

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

0

see this and you can put it. I make a little exemple to you >> I use your index <<

http://hackthismissionscriptcomplete.hpage.com/

Edited: I will delete the URL after 24 hour ;)

3 replies have been removed

[deleted user]
10 years ago

1

Yes @rekcah.ronoh I have already checked it. But what @paulau wants is different. @paulau want’s to make those text which are dropping down into a link which I have tried but it doesn’t work.

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

0

you mean when he click on them >>>those text which are dropping down<<< The Browser Redirect the user to a new page.

[deleted user]
10 years ago

0

Yes @rekcah.ronoh now you have got it.

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

1

tlotr maybe,,,,, no way to do that because it’s a

[paulau]
10 years ago

1

yes tlotr know what i want , you do a good job rekcah.ronoh but i want href element on the text which is slide down :\

Cyan Wind [freewind1012]
10 years ago

1

Do you want it? Gotta do it yourself. :/

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

[paulau]
10 years ago

0

i tried but i can’t get it :\ and i search on google…

Cyan Wind [freewind1012]
10 years ago | edited 10 years ago

1

Yeah, your idea is great but is it practical? Let’s take your code as an example: What if someone wants to click the link while the text is “morphing”? Where do they have to click: the dropping letters, the dropped letters, or the placeholder of the text?

And don’t call href element, it is an attribute of tag. The best solution is to create a clickable object when the animation is already done.

![Image](https://www.hackthis.co.uk/user/userbar.png?user=freewind1012%20//%20Navigator)

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

1

paulau I think that’s possible to reddirect all the .html >>>tag<<< to a link with href_function

emmmmmm maybe there is an analogous solution to your idea paulau…..
* I can do that for U * >>> When Anyone pressed anywhere in this page the browser will redirrect him to a link.

[paulau]
10 years ago

0

freewind had find what i want , when the morphing is finish , if we click on the text that redirect us

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

-3

post edited >>>>> paulau Yeah, freewind gave you a solution…. Any way I maked an Additional solution.

[deleted user]
10 years ago

0

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

2

Post Edited Thanks,,,, tlotr I know, I try it but >> the code quotes devide the htm code.
paulau I disable the right-click >mouse< & the keyboard buttons, and of course there is a href function

when you click in any inch in your index & at any moment, even before the end of writing letters coming down the browser will reddirect you to hackthis.co.uk <<

link: http://justasite.eb2a.com/rekcah.ronoh/
code: http://pastebin.com/tb5Qf8vB

[paulau]
10 years ago

1

thanx :D

?ouo? ?????? [rekcah.ronoh]
10 years ago

-3

U welcome paulau :D

[paulau]
10 years ago

1

rekcah did you know how to do a text like “hello world” and when we put cursor and a letter like the “e” the letter and the other infront comes bigger ?

?ouo? ?????? [rekcah.ronoh]
10 years ago | edited 10 years ago

-3

paulau I didn’t understand you well … Do you mean you want to add an icon in your .html such as the Internet Explorer like the Icon below, when the cursor is positioned them, it grow up (icon) and at the same time you receive a message such as written ex: HELLO WORLD

If yes, ====) I didn’t try it before, I’ll try this 4 you (====

![Image](http://www.frequenceuzege.com/images/IE.png)

[paulau]
10 years ago

1

not picture , text , and not when we click , we we go on. But thank you for help me and give me your time ^^

?ouo? ?????? [rekcah.ronoh]
10 years ago

1

Yeah You welcome paulau >> De Rien << (y)