JQuery Social Media Ribbon Links

Developer
Tim Normington
Size
3,904 Kb
Views
12,144
  1. JQuery Social Media Ribbon Links Previews
  2. JQuery Social Media Ribbon Links HTML Codes
  3. JQuery Social Media Ribbon Links CSS Codes
  4. JQuery Social Media Ribbon Links JS Codes

How do I make an jquery social media ribbon links?

What is a jquery social media ribbon links? How do you make a jquery social media ribbon links? This script and codes were developed by Tim Normington on 05 December 2022, Monday.

JQuery Social Media Ribbon Links Previews
IQ Test

JQuery Social Media Ribbon Links - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Social Media Ribbon Links</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Social Media Ribbon Links - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: gray; padding: 1em;
}
.container { max-height: 400px; height: 100%; max-width: 400px; width: 100%; background-color: white;
}
.ribbon { transform: rotateZ(-45deg); transition: all 0.25s ease-out; cursor: pointer; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
}
.ribbon-wrapper { position: absolute; overflow: hidden; padding: 6em 0; min-width: 20em;
}
.ribbon-wrapper.top { top: 0;
}
.ribbon-wrapper.top .ribbon:hover { margin-top: 6em;
}
.ribbon-wrapper.right { right: 0; display: flex; justify-content: flex-end;
}
.ribbon-wrapper.right .ribbon { margin-right: -14em;
}
.ribbon-wrapper.right .ribbon:hover { margin-right: -6em;
}
.ribbon-wrapper.left { left: 0;
}
.ribbon-wrapper.bottom { bottom: 0;
}

JQuery Social Media Ribbon Links - Script Codes JS Codes

"use strict";
$.fn.ribbonify = function (options) { var settings = $.extend({ // These are the defaults. color: "#556b2f", backgroundColor: "#1DA1F2", position: "top left", links: { twitter: "https://twitter.com/tnormington" } }, options); this.css('position', 'relative'); var $wrapper = $('<div class="ribbon-wrapper" />').addClass(settings.position); for (var link in settings.links) { var $ribbon = $.fn.ribbonify.createRibbon(settings.backgroundColor, 300, 150); $ribbon.append('text').attr('font-family', 'FontAwesome').attr('font-size', function (d) { return d.size + 'em'; }).text(function (d) { return ""; }); $wrapper.append($ribbon); } this.append($wrapper);
};
$.fn.ribbonify.createRibbon = function (color, w, h) { var $ribbon = $('<svg class="ribbon" width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '" xmlns="http://www.w3.org/2000/svg"><path fill="' + color + '" d="M0 0h' + w + 'v' + h + 'H0z" /></svg>'); $ribbon.find('svg').append('<a xlink:href="https://www.google.co.uk/" target="_top"><text x="50%" y="50%" style="text-anchor: middle">google</text></a>'); return $ribbon;
};
$(document).ready(function () { $('.container').ribbonify({ position: 'top right' });
});
JQuery Social Media Ribbon Links - Script Codes
JQuery Social Media Ribbon Links - Script Codes
Home Page Home
Developer Tim Normington
Username tnormington
Uploaded December 05, 2022
Rating 3
Size 3,904 Kb
Views 12,144
Do you need developer help for JQuery Social Media Ribbon Links?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Normington (tnormington) Script Codes
Name
Parellelogram Link Hover Effect
A Pen by Tim Normington
Mobile Drop Down
Twitch Notification Concept
SVG Coffee Animation
Loading Bar Animation
Social Media Sidebar
Loading Animation
Footer Link Navigation
Camping Checklist
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!