I'm trying to put together a plugin of the onScrollBlur effect seen on Medium.
At the moment I am trying to get output of the HTML via a shortcode, but I'm outputting nothing - including the JS and CSS files.
I'm not a PHP specialist, just trying to get a bit better.
<?php
/**
* Plugin Name: OnScrollBlur
* Plugin URI: http://antpowerwebdevelopment.com
* Description: Medium/Twitter style Image Header onScrollBlur,great stylish header for your new build
* Version: 1.0.0
* Author: Ant Power
* Author URI: http://antpowerwebdevelopment.com
*
*/
?>
<?php
// register jquery and style on initialization
add_action('init', 'register_script');
function register_script(){
wp_register_script( 'script_js', plugins_url('/js/script.js'));
wp_register_style( 'style_css', plugins_url('/css/style1.css'));
}
// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');
function enqueue_style(){
wp_enqueue_script('script_js');
wp_enqueue_style( 'style_css' );
}
add_action( 'admin_menu', 'register_onScrollPage' );
function register_onScrollPage(){
add_menu_page( 'onScrollBlur', 'onScrollBlur', 'manage_options', 'onScrollBlur_admin-menu', 'onScollBlur_configure', plugins_url( 'myplugin/images/icon.png' ), 6 );
}
function onScrollBlur(){
?>
<div class='blurImg'>
<div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
<div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
</div>
<header>
<div>
<h1>
Medium
</h1>
<p>
Everyone’s stories and ideas
</p>
<a href='https://medium.com/' title='Medium'>Learn more</a>
</div>
<?php
}
add_shortcode('onScrollBlur1', 'onScrollBlur');
?>