How to make creative link effects?

[keithmoore43]

I've got a page on my Genesis dev site (working from the basic framework) that is a collection of links to articles on my site (image below--links currently in red). I was thinking it would be cool to explore some creative link effects like the ones found here: http://tympanus.net/Development/CreativeLinkEffects/

Rather than just a collection of link text, maybe get some cool transitional effect for each link. I don't know...I want to explore it, learning more about development in the process.

But I'm not sure how to get these effects into WordPress. I tried copying some custom css (copied from the article above) to the bottom of my child style.css file, then creating a div tag around the links in the page with the same class, but that didn't take. Would that be a common way to do it and maybe I just did it wrong? Or maybe there's a plugin I should explore?

http://www.keith-moore.net/article-page

[Christoph]

Hi Keith,

I believe there was a mistake along the way.
I just tried the code from the article and it works fine (after changing nav to div and the class to be the same as in the css).

When you insert the code at the bottom of the style.css make sure you are outside of the media queries.
Create the div element in the editor in text view and make sure you are using the same class name as the css.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[keithmoore43]

Thanks, Christoph! I got the first example to work where the brackets appear around each link. I tried example two (where the link rotates like a slot machine) and it didn't work, instead rotating into a white link that disappears--like maybe half of the CSS worked. If you've got any thoughts on that it would be awesome, but I'm happy just getting one idea to work, so thanks for that!

[Christoph]

Hi Keith,

I believe you are not missing css but the necessary js file.
You have to upload and enqueue the modernizr.custom.js from the js folder.

If your functions.php is already enqueueing js you can just add this as a separate line:

wp_enqueue_script( 'modernizr.custom', get_bloginfo( 'stylesheet_directory' ) . '/js/modernizr.custom.js', array( 'jquery' ), '1.0.0' );

I am using the genesis sample theme, so I had to create an action and function.

//* Enqueue scripts and styles

add_action( 'wp_enqueue_scripts', 'ch_enqueue_modernizr' );

function ch_enqueue_modernizr() {

	wp_enqueue_script( 'modernizr.custom', get_bloginfo( 'stylesheet_directory' ) . '/js/modernizr.custom.js', array( 'jquery' ), '1.0.0' );

}

I got it working here:
http://excellentwpsites.com/testing-creative-link-effects-example-2/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Brad Dalton]

You don't need the js for example 2.

The problem is in your CSS or HTML.

---

Tutorials for StudioPress Themes.

[Christoph]

I agree that the effect of the example doesn't need js.

The problem is with the provided css of the example.
It uses the class .csstransforms3d to format the "end state/result" of the spinning.
This class is added/activated through the js.

Without the js but with the class it looks like this:
excellentwpsites.com/creative-link-effects-example-2-no-js-with-csstransforms3d/

So either add the js or delete the .csstransforms3d from

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
	background: #28a2ee;	
}

and

.csstransforms3d .cl-effect-2 a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0965a0;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

Example without js and .csstransforms3d:
excellentwpsites.com/creative-link-effects-example-2-no-js/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Brad Dalton]

Sorry. My bad. Without the js, it doesn't work properly.

---

Tutorials for StudioPress Themes.

[keithmoore43]

Yeah, I was getting Christoph's result without the js. Anyone got tips on how to get it into my framework? I installed modernizr in my last html class, working with simple web pages. I know you drop the code in the head and put the file in a js folder, but I don't know which folder that would be in WP.

[Christoph]

Depending on whether or not your theme is using js already, the folder should be here or be created here:
/wp-content/themes/whatever-your-theme-name-is/js/

I recommend to enqueue the file as described above.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[keithmoore43]

Hmm, not sure if I'm on track yet.

I created a new js folder in my child theme and added the modernizr.custom.js file.

Then I added your suggested code above to functions.php

//* Enqueue scripts and styles

add_action( 'wp_enqueue_scripts', 'ch_enqueue_modernizr' );

function ch_enqueue_modernizr() {

wp_enqueue_script( 'modernizr.custom', get_bloginfo( 'stylesheet_directory' ) . '/js/modernizr.custom.js', array( 'jquery' ), '1.0.0' );

}

I'm making progress, as the link rotates when I hover over it (previously the blue link simply shifted to white). Now I gotta figure out why the text within the link disappears after the rotation.

Got all this going on MAMP...wondering if that could be an issue.

[Christoph]

Check if the js is actually being loaded on the page.
In the context menu of your browser select View Page Source
You should see the file around this area:
http://screencast.com/t/BkEpZ1aT6mf

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[keithmoore43]

Looks like it's loading, as I see this in the head: <script type='text/javascript' src='http://localhost:8888/keith-moore.net/wp-content/themes/genesis-sample/js/modernizr.custom.js?ver=1.0.0'></script>

The difference is the addition of the ?ver=1.0.0 at the end of the file. Does that matter?

[Author]

Posts